/* Shared Ehopto appearance primitives for app, registry and public screens.
   Explicit light selectors override legacy dark page styles where possible.
   Component-specific colours should use these variables instead of hardcoding. */
/* Compatibility names resolve to the canonical dial in both themes. */
html.ehopto-theme-light,html.ehopto-theme-dark,
body.ehopto-light-mode,body.ehopto-dark-mode{
 --eh-app-bg:var(--e-bg);--eh-app-surface:var(--e-card);--eh-app-text:var(--e-ink);
 --eh-app-muted:var(--e-ink-muted);--eh-app-border:var(--e-line);
 --e-entity-card-bg:var(--e-card);--e-entity-card-ink:var(--e-ink);
 --e-entity-card-muted:var(--e-ink-muted);--e-entity-card-line:var(--e-line);
 --e-entity-card-link:var(--e-accent-soft);
}

@media screen{body.ehopto-light-mode:not([data-ehopto-surface="website"]){background:var(--eh-app-bg)!important;color:var(--eh-app-text)!important}}
body.ehopto-light-mode #ehopto-appnav{background:#fff!important;border-color:#ccd5e4!important}
body.ehopto-light-mode #ehopto-appnav button{color:#24334a!important}
body.ehopto-light-mode #ehopto-appnav button[aria-expanded=true]{color:var(--trim,var(--e-accent,#316fca))!important}

body.ehopto-light-mode .ehopto-home-onboarding,
body.ehopto-light-mode .ehopto-home-start,
body.ehopto-light-mode [class*="start-here"]{
 background-color:var(--eh-app-surface)!important;
 color:var(--eh-app-text)!important;
}
body.ehopto-light-mode [class*="start-here"] h2,
body.ehopto-light-mode [class*="start-here"] h3{color:var(--eh-app-text)!important}
body.ehopto-light-mode #ehopto-appnav button .ic{color:inherit}
@media(max-width:1099px){
 body.ehopto-light-mode #ehopto-appnav{background:#fff!important;color:#16263d!important}
}
/* Centre recommendation section headings without moving their cards. */
.hm-related :is(h2,h3,.section-title,.hm-related-heading),
[class*="related-section"]> :is(h2,h3),
[class*="recommendation"]> :is(h2,h3){text-align:center!important;width:100%}

/* Audit batch 2 — standalone Home and Work wanted.
   Explicit per-component foreground/background pairs avoid mixed modes. */
html.ehopto-theme-light body.ehopto-theme-audit-home,
html.ehopto-theme-light body.ehopto-theme-audit-needs,
body.ehopto-light-mode.ehopto-theme-audit-home,
body.ehopto-light-mode.ehopto-theme-audit-needs{
 background:#f7f9fc!important;color:#192941!important;color-scheme:light!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home :is(.setup,.have,.say,.sheet,.tile,.teach,.code-door,.ask,.feed-here,.flash),
body.ehopto-light-mode.ehopto-theme-audit-needs :is(.card,.answer){
 background:#fff!important;color:#192941!important;border-color:#ccd7e5!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home :is(h1,h2,h3,.setup-head,.have-head,.feed-head,.feed-head b),
body.ehopto-light-mode.ehopto-theme-audit-needs :is(h1,h2,h3,.card h3){
 color:#192941!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home :is(.hello,.sub,.hint,.feed-invite,.feed-here .empty,.code-door),
body.ehopto-light-mode.ehopto-theme-audit-needs :is(.why,.meta,.body){
 color:#4b5d75!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home :is(input,select,textarea),
body.ehopto-light-mode.ehopto-theme-audit-needs :is(input,select,textarea){
 background:#fff!important;color:#192941!important;border-color:#879bb9!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home :is(.setup,.have,.say,.sheet,.tile) :is(p,small,label,span),
body.ehopto-light-mode.ehopto-theme-audit-needs .card :is(p,small,label,span){
 color:inherit;
}
body.ehopto-light-mode.ehopto-theme-audit-home .plate{
 background:linear-gradient(155deg,#e9f1ff,#d9e7fa)!important;
 color:#182d4d!important;border-color:#8daed7!important;box-shadow:0 10px 24px #1f3c6b20!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .plate :is(.ecode,.kicker,.whose){
 color:#19385f!important;text-shadow:none!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .plate .doors span{
 background:#fff!important;color:#214f91!important;border-color:#9bb2d3!important;
}
body.ehopto-dark-mode.ehopto-theme-audit-home,
body.ehopto-dark-mode.ehopto-theme-audit-needs{
 background:#0b1020!important;color:#f0ece9!important;color-scheme:dark!important;
}

/* Audit batch 3 — Room: keep each background paired with readable foreground. */
body.ehopto-light-mode.ehopto-theme-audit-room,
html.ehopto-theme-light body.ehopto-theme-audit-room{
 background:#f7f9fc!important;color:#18253b!important;color-scheme:light;
}
body.ehopto-light-mode.ehopto-theme-audit-room :is(.came,.room-web-context,.card,.entry,.post,.message,.room-card),
html.ehopto-theme-light body.ehopto-theme-audit-room :is(.came,.room-web-context,.card,.entry,.post,.message,.room-card){
 background:#fff!important;color:#18253b!important;border-color:#ccd8e8!important;
}
body.ehopto-light-mode.ehopto-theme-audit-room :is(.came .tag,.sub,.source .why,.came .back,.room-return),
html.ehopto-theme-light body.ehopto-theme-audit-room :is(.came .tag,.sub,.source .why,.came .back,.room-return){
 background:#f7f9fc;color:#50617a!important;
}
body.ehopto-light-mode.ehopto-theme-audit-room .came .said,
body.ehopto-light-mode.ehopto-theme-audit-room :is(h1,h2,h3){color:#18253b!important}
body.ehopto-light-mode.ehopto-theme-audit-room :is(input,select,textarea){
 background:#fff!important;color:#18253b!important;border-color:#8c9db6!important
}
body.ehopto-dark-mode.ehopto-theme-audit-room{background:#0b1020!important;color:#f0ece9!important;color-scheme:dark}
/* Home light-mode parity (17 Oct 2026).
   Legacy Home styles use near-white-on-navy text; switching the outer cards
   to white alone hid the search heading, suggested searches and setup steps.
   These selectors are intentionally Home-only. Do not bleach the dark covers
   or overwrite the site-wide navigation design. */
body.ehopto-light-mode.ehopto-theme-audit-home{
  --eh-home-ink:#1c2f4c;
  --eh-home-muted:#526780;
  --eh-home-blue:#1d5dab;
  --eh-home-border:#d3deeb;
  --eh-home-tint:#eff5ff;
  --eh-home-surface:#fff;
}
/* Keep the search on the page, not in a large white-on-white rectangular card. */
body.ehopto-light-mode.ehopto-theme-audit-home .ask{
  background:transparent!important;border:0!important;box-shadow:none!important;
  color:var(--eh-home-ink)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .ask .eseek{
  --seek-surface:var(--eh-home-surface);
  --seek-sunk:var(--eh-home-tint);
  --seek-ink:var(--eh-home-ink);
  --seek-muted:var(--eh-home-muted);
  --seek-line:var(--eh-home-border);
  --seek-accent:var(--eh-home-blue);
  min-width:0;max-width:100%;
}
body.ehopto-light-mode.ehopto-theme-audit-home .ask .eseek-lead{
  color:var(--eh-home-ink)!important;
  font-weight:850;
}
body.ehopto-light-mode.ehopto-theme-audit-home .ask .eseek-box{
  min-width:0;background:var(--eh-home-surface)!important;
  border-color:var(--eh-home-border)!important;
  box-shadow:0 4px 16px rgba(26,56,95,.06);
}
body.ehopto-light-mode.ehopto-theme-audit-home .ask .eseek-box:focus-within{
  border-color:var(--eh-home-blue)!important;
  box-shadow:0 0 0 3px rgba(29,93,171,.13);
}
body.ehopto-light-mode.ehopto-theme-audit-home .ask .eseek-box input[type="search"]{
  flex:1 1 auto;min-width:0;
  background:transparent!important;box-shadow:none!important;
  border:0!important;border-radius:0!important;
  color:var(--eh-home-ink)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .ask .eseek-box input::placeholder{
  color:var(--eh-home-muted)!important;opacity:1;
}
body.ehopto-light-mode.ehopto-theme-audit-home .ask :is(.eseek-search-button,.eseek-scan-trigger){
  color:var(--eh-home-blue)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .ask .eseek-divider{
  background:var(--eh-home-border);
}
body.ehopto-light-mode.ehopto-theme-audit-home .ask :is(.eseek-suggestions,.eseek-scan-panel){
  background:var(--eh-home-surface)!important;
  color:var(--eh-home-ink)!important;
  border-color:var(--eh-home-border)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .find-eg{
  align-items:center;gap:7px 8px;
}
body.ehopto-light-mode.ehopto-theme-audit-home .find-eg::before{
  color:var(--eh-home-muted)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .find-eg a{
  color:var(--eh-home-blue)!important;
  background:var(--eh-home-tint)!important;
  border-color:#b7cae2!important;
  min-height:32px;display:inline-flex;align-items:center;
  text-decoration:none;
}
body.ehopto-light-mode.ehopto-theme-audit-home .find-eg a:is(:hover,:focus-visible){
  color:#123c79!important;background:#dfedff!important;border-color:var(--eh-home-blue)!important;
  outline-offset:2px;
}
/* Each checklist row must remain legible even when incomplete or hovered.
   The older hover painted a navy rectangle while the light theme forced dark
   subtitles into it. Keep the row light, selected or not. */
body.ehopto-light-mode.ehopto-theme-audit-home .setup{
  background:var(--eh-home-surface)!important;
  border-color:var(--eh-home-border)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .setup-head,
body.ehopto-light-mode.ehopto-theme-audit-home .setup-head b{
  color:var(--eh-home-ink)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .setup-head span{
  color:var(--eh-home-muted)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .setup-hide{
  color:var(--eh-home-muted)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .setup-hide:is(:hover,:focus-visible){
  color:var(--eh-home-blue)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .setup .step{
  color:var(--eh-home-ink)!important;
  background:transparent!important;
  min-width:0;gap:12px;
}
body.ehopto-light-mode.ehopto-theme-audit-home .setup .step:is(:hover,:focus-visible){
  color:var(--eh-home-ink)!important;
  background:var(--eh-home-tint)!important;
  outline-offset:2px;
}
body.ehopto-light-mode.ehopto-theme-audit-home .setup .step b{
  color:var(--eh-home-ink)!important;
  overflow-wrap:break-word;
}
body.ehopto-light-mode.ehopto-theme-audit-home .setup .step.done b{
  color:#53677f!important;
  text-decoration:line-through;
}
body.ehopto-light-mode.ehopto-theme-audit-home .setup .step .sub{
  color:var(--eh-home-muted)!important;
  line-height:1.45;
}
body.ehopto-light-mode.ehopto-theme-audit-home .setup .step .go{
  color:var(--eh-home-blue)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .setup .step .tick{
  color:#174b74!important;
  border-color:#758ba6!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .setup .step.done .tick{
  color:#114a36!important;background:#7fe0a8!important;border-color:#7fe0a8!important;
}
/* Other Home controls carry the same readable text/surface pairs. */
body.ehopto-light-mode.ehopto-theme-audit-home :is(.have-head,.have-lead,.feed-head,.feed-head b){
  color:var(--eh-home-ink)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .have-kinds a{
  color:var(--eh-home-blue)!important;
  background:var(--eh-home-tint)!important;
  border-color:#b7cae2!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .have-kinds a:is(:hover,:focus-visible),
body.ehopto-light-mode.ehopto-theme-audit-home .have-kinds a.on{
  color:#123c79!important;background:#dfedff!important;
  border-color:var(--eh-home-blue)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home :is(.feed-invite,.feed-say,.feed-here .empty,.say-top,.say-orig,.say-mention-note,.tile span){
  color:var(--eh-home-muted)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home :is(.feed-invite a,.feed-head a,.feed-end,.say-place summary){
  color:var(--eh-home-blue)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .say textarea{
  color:var(--eh-home-ink)!important;background:transparent!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .say textarea::placeholder{
  color:var(--eh-home-muted)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .teach{
  background:var(--eh-home-tint)!important;
  color:var(--eh-home-ink)!important;border-color:var(--eh-home-border)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .teach #teach-text{
  color:var(--eh-home-ink)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .teach :is(#teach-next,#teach-x){
  color:var(--eh-home-blue)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .flash{
  color:var(--eh-home-ink)!important;
  border-color:var(--eh-home-border)!important;
  background:var(--eh-home-surface)!important;
}
/* Eai and scan-entry cards deliberately keep their dark blue identity.
   Their form controls must stay light-on-dark, even in the light theme. */
body.ehopto-light-mode.ehopto-theme-audit-home .eai{
  background:linear-gradient(135deg,#142642,#0e1d35)!important;
  color:#fafcff!important;border-color:#3e5b82!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .eai :is(.eai-line,.eai-line b){
  color:#fafcff!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .eai :is(.eai-ask,.eai-quick a){
  color:#bbcce3!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .eai-form input{
  background:#0d1c32!important;color:#fafcff!important;border-color:#536a8c!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .eai-form input::placeholder{
  color:#bbcce3!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .eai-form button{
  background:var(--e-action)!important;color:var(--e-on-action)!important;
}
/* Notifications/recent-Hub shelf loads after Home's main CSS: specificity
   prevents its old navy-only card rules from bleeding into light mode. */
body.ehopto-light-mode.ehopto-theme-audit-home .home-continuity{
  background:var(--eh-home-surface)!important;
  border-color:var(--eh-home-border)!important;color:var(--eh-home-ink)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home :is(.home-continuity-head>span,.home-continuity-lane-head.recent small,.home-continuity-notice small){
  color:var(--eh-home-muted)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .home-continuity-lane + .home-continuity-lane{
  border-color:var(--eh-home-border)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .home-continuity-notice,
body.ehopto-light-mode.ehopto-theme-audit-home .home-continuity-notice strong{
  color:var(--eh-home-ink)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .home-continuity-card{
  background:var(--eh-home-tint)!important;
  border-color:var(--eh-home-border)!important;
  color:var(--eh-home-ink)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .home-continuity-card:is(:hover,:focus-visible){
  border-color:var(--eh-home-blue)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .home-continuity-icon{
  background:#e0ecff!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .home-continuity-copy strong{
  color:var(--eh-home-ink)!important;
}
body.ehopto-light-mode.ehopto-theme-audit-home .home-continuity-copy :is(small,em){
  color:var(--eh-home-muted)!important;
}
@media(max-width:560px){
  body.ehopto-light-mode.ehopto-theme-audit-home .ask .eseek-box{
    max-width:100%;
  }
  body.ehopto-light-mode.ehopto-theme-audit-home .find-eg{
    gap:7px;
  }
  body.ehopto-light-mode.ehopto-theme-audit-home .setup{
    padding:12px 10px 7px;
  }
  body.ehopto-light-mode.ehopto-theme-audit-home .setup .step{
    padding:10px 8px;
  }
}