/* Night colours for the public site. In light mode each component uses its original palette. */
:root:not([data-nh-theme="light"]) {
  color-scheme: dark;
  --nh-scheme: dark;
  --nh-page: #101b18;
  --nh-surface: #192a24;
  --nh-inset: #14221e;
  --nh-raised: #22392f;
  --nh-line: #3c5549;
  --nh-line-active: #93b79b;
  --nh-text: #eff4e9;
  --nh-body: #d3dfd2;
  --nh-muted: #aabeb0;
  --nh-accent: #a8d7ad;
  --nh-action: #a6d5b0;
  --nh-action-hover: #c1e6bf;
  --nh-on-action: #123828;
  --nh-danger: #ffa999;
  --nh-danger-bg: #422820;
  --nh-danger-line: #96665b;
  --nh-warn: #f1ca8e;
  --nh-warn-bg: #383023;
  --nh-warn-line: #89734e;
}
:root[data-nh-theme="light"] { color-scheme: light; }

/* Keep a 44px touch target around the smaller visual switch. */
button.nh-theme-switch {
  --rail: #22372f;
  --rim: #4b6657;
  --thumb: #c3e5c7;
  --selected: #173d2b;
  --idle: #adbead;
  appearance: none;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  width: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}
[data-nh-theme="light"] .nh-theme-switch {
  --rail: #e6ede2;
  --rim: #a1b5a5;
  --thumb: #fffdec;
  --selected: #77541b;
  --idle: #536d59;
}
.nh-theme-switch:focus-visible { outline: 3px solid var(--nh-accent, #337452); outline-offset: 3px; }
.nh-theme-rail {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  box-sizing: border-box;
  isolation: isolate;
  width: 64px;
  height: 34px;
  padding: 2px;
  background: var(--rail);
  border: 1px solid var(--rim);
  border-radius: 999px;
}
.nh-theme-rail::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--thumb);
  box-shadow: 0 1px 4px #0b1b1429;
  transition: transform 180ms ease-out;
}
.nh-theme-rail svg { width: 17px; height: 17px; color: var(--idle); }
.nh-theme-switch[aria-checked="false"] .nh-theme-moon,
.nh-theme-switch[aria-checked="true"] .nh-theme-sun { color: var(--selected); }
.nh-theme-switch[aria-checked="true"] .nh-theme-rail::before { transform: translateX(30px); }
@media (hover: hover) { .nh-theme-switch:hover .nh-theme-rail { border-color: var(--idle); } }
@media (prefers-reduced-motion: reduce) { .nh-theme-rail::before { transition: none; } }
@media (forced-colors: active) {
  .nh-theme-rail { border-color: ButtonText; }
  .nh-theme-rail::before { border: 2px solid Highlight; box-sizing: border-box; }
}
@media print { .nh-theme-switch { display: none !important; } }

/* The navigation rerenders after sign-in. Its sibling switch keeps keyboard focus. */
header.entry-top > .entry-home, header.top > nav { margin-left: auto; }
body > .nh-theme-switch { position: absolute; top: 23px; right: max(5%, calc((100vw - 1224px)/2)); z-index: 2; }
@media (max-width: 900px) {
  body.nh-play .topbar nav > a[data-play-nav] { display: none; }
}
@media (max-width: 570px) {
  body.nh-play .topbar, body.nh-play.customer-workspace .topbar {
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    height: auto; min-height: 72px; padding: 9px 5% 11px; gap: 4px 12px;
  }
  body.nh-play .topbar > .brand { grid-column: 1; grid-row: 1; justify-self: start; }
  body.nh-play .topbar > .nh-theme-switch { grid-column: 2; grid-row: 1; }
  body.nh-play .topbar > nav {
    grid-column: 1/-1; grid-row: 2; width: 100%; min-width: 0;
    flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px;
  }
  html:has(body.nh-play #landing:not([hidden])) { scroll-padding-top: 120px; }
  header.entry-top, header.top { height: auto; min-height: 76px; gap: 8px 12px; flex-wrap: wrap; }
  header.entry-top > .entry-home, header.top > nav { order: 3; }
  header.entry-top > .nh-theme-switch, header.top > .nh-theme-switch { margin-left: auto; }
  body > .nh-theme-switch { top: 16px; }
}
/* Logos keep their original brand green. */
html:not([data-nh-theme="light"]) :is(.nh-brand-logo, .nh-auth-logo, .nh-chat-logo) {
  content: url('/brand/notchhost-logo-light.svg?v=20261109-1');
}
html:not([data-nh-theme="light"]) :is(.play-demo-brand img, .nh-loading-mark) {
  content: url('/brand/notchhost-mark-light.svg?v=20261109-1');
}
html:not([data-nh-theme="light"]) body > main:is(.legal-page,.privacy-page) > a:first-child .nh-brand-logo {
  content: url('/brand/notchhost-logo-light.svg?v=20261109-1');
}
html:not([data-nh-theme="light"]) body > main:is(.legal-page,.privacy-page) > a:first-child:not(:has(img)) {
  background-image: url('/brand/notchhost-logo-light.svg?v=20261109-1');
}
html:not([data-nh-theme="light"]) .nh-play .play-bluff { background: var(--nh-raised); border-color: var(--nh-line); }
html:not([data-nh-theme="light"]) .play-bluff h3 { color: var(--nh-text); }
html:not([data-nh-theme="light"]) .play-bluff p { color: var(--nh-body); }
html:not([data-nh-theme="light"]) .staff-sidebar .sidebar-foot a { color: var(--nh-body); }
html:not([data-nh-theme="light"]) .nh-chat-staff .staff-sidebar nav a.active > span { color: var(--nh-body); }