/* The module header keeps help, the Live toggle and My imprint in one row. */
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header {
  --module-control-gap:8px;
  --module-controls-width:calc(var(--account-height) + var(--account-width) + var(--module-control-gap) * 2);
  --brand-width:min(171px,calc((100vw - var(--chrome-x) - var(--chrome-x) - var(--module-controls-width) - 4px) / 2.15));
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--account-height) var(--account-width);
  column-gap:var(--module-control-gap);
}
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header.has-work-access {
  --module-controls-width:calc(var(--account-height) * 2 + var(--account-width) + var(--module-control-gap) * 3);
  grid-template-columns:minmax(0,1fr) var(--account-height) var(--account-height) var(--account-width);
}
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header .account-button {
  grid-column:3;
  grid-row:1;
}
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header.has-work-access .account-button { grid-column:4; }
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header .module-how-trigger {
  grid-column:2;
  grid-row:1;
  margin:var(--account-offset) 0 0;
}
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header .live-site-utilities {
  position:static;
  inset:auto;
  grid-column:3;
  grid-row:1;
  display:grid;
  place-items:center;
  width:var(--account-height);
  height:var(--account-height);
  margin:var(--account-offset) 0 0;
  padding:0;
  gap:0;
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header :is(.module-how-trigger,.live-work-access) {
  position:static;
  inset:auto;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  flex:none;
  width:var(--account-height);
  height:var(--account-height);
  min-width:var(--account-height);
  min-height:var(--account-height);
  max-width:none;
  max-height:none;
  padding:0;
  gap:0;
  appearance:none;
  font-size:0;
  line-height:1;
  text-decoration:none;
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  cursor:pointer;
}
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header .live-work-access { margin:0; }
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header :is(.account-button,.module-how-trigger,.live-work-access) {
  border:1px solid color-mix(in srgb,var(--brand-color) 38%,transparent);
  border-radius:6px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--brand-color) 12%,transparent),color-mix(in srgb,var(--brand-color) 3%,transparent));
  color:var(--brand-color);
  text-shadow:none;
  transform:none;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--brand-color) 12%,transparent),0 4px 12px #00000008;
}
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header :is(.account-button,.module-how-trigger,.live-work-access):hover {
  border-color:var(--brand-color);
  background:color-mix(in srgb,var(--brand-color) 17%,transparent);
  color:var(--brand-color);
  box-shadow:none;
  transform:none;
}
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header :is(.account-button,.module-how-trigger,.live-work-access):focus-visible {
  outline:2px solid var(--brand-color);
  outline-offset:4px;
}
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header :is(.module-how-trigger,.live-work-access) > span { display:none; }
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header .live-work-access > svg {
  display:block;
  width:28px;
  height:28px;
  min-width:0;
  margin:0;
  flex:none;
}
main.ritual-room:is(.sentence,.canvas) > header.pluritual-header .module-how-trigger > svg.help-question-icon {
  display:block;
  width:25px;
  height:25px;
  margin:0;
}

/* Home keeps the same help symbol beside its existing quiet footer. */
.landing.imprint-landing .landing-secondary-links .site-how-link {
  --home-help-color:var(--brand-color,#211f1a);
  box-sizing:border-box;
  display:grid;
  place-items:center;
  flex:none;
  width:40px;
  height:40px;
  min-height:40px;
  margin:2px 0 6px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--home-help-color) 38%,transparent);
  border-radius:8px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--home-help-color) 12%,transparent),color-mix(in srgb,var(--home-help-color) 3%,transparent));
  color:var(--home-help-color);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--home-help-color) 12%,transparent),0 4px 12px #00000008;
  font-size:0;
  line-height:1;
  text-decoration:none;
  transform:none;
}
.landing.imprint-landing.is-complete .landing-secondary-links .site-how-link { --home-help-color:#d4b878; }
.landing.imprint-landing .landing-secondary-links .site-how-link > svg.help-question-icon { display:block; width:22px; height:22px; }
.landing.imprint-landing .landing-secondary-links .site-how-link:hover,
.landing.imprint-landing .landing-secondary-links .site-how-link[aria-expanded="true"] {
  border-color:var(--home-help-color);
  background:color-mix(in srgb,var(--home-help-color) 17%,transparent);
  box-shadow:none;
}
.landing.imprint-landing .landing-secondary-links .site-how-link:focus-visible { outline:2px solid var(--home-help-color); outline-offset:4px; }

@media (max-width:900px), (max-width:1024px) and (max-height:500px) {
  main.ritual-room:is(.sentence,.canvas) > header.pluritual-header {
    --brand-width:min(clamp(96px,28vw,116px),calc((100vw - var(--chrome-x) - var(--chrome-x) - var(--module-controls-width) - 4px) / 2.15));
  }
  main.ritual-room:is(.sentence,.canvas) > header.pluritual-header :is(.account-button,.module-how-trigger,.live-work-access) { border-radius:8px; }
  main.ritual-room:is(.sentence,.canvas) > header.pluritual-header .live-work-access > svg { width:24px; height:24px; }
  main.ritual-room:is(.sentence,.canvas) > header.pluritual-header .module-how-trigger > svg.help-question-icon { width:22px; height:22px; }
}
@media (max-width:600px) and (max-height:700px), (min-width:601px) and (max-height:500px) {
  .landing.imprint-landing .landing-secondary-links .site-how-link { width:36px; height:36px; min-height:36px; margin:0 0 3px; }
}