/* V020 shared chrome refinements. This sheet is loaded after the inherited module styles. */

/* Use the smaller shared brand slot so the module name stays snug to the slash. */
main.ritual-room:is(.sentence, .canvas) { --brand-width: 171px; }
.ritual-room .pluritual-header .imprint-module-label > img {
  height: calc(var(--brand-width) * 347 / 992);
}

.ritual-room .pluritual-header .imprint-module-name > .imprint-module-separator {
  flex-basis: calc(var(--brand-width) * .05);
  width: calc(var(--brand-width) * .05);
  height: calc(var(--brand-width) * .18);
  margin-top: calc(var(--brand-width) * .075);
  opacity: 1;
}
.ritual-room .pluritual-header .imprint-module-name > .imprint-module-separator::before { width: 2px; }
.ritual-room .pluritual-header .imprint-next-reveal strong { font-size: 28px; }

@media (max-width: 900px) {
  .ritual-room .pluritual-header .imprint-next-reveal strong {
    font-size: clamp(16px, 3.5vw, 22px);
  }
}

/* BACK and SKIP share quiet, even controls around the centered progress dots. */
main.ritual-room:is(.sentence, .canvas) .room-nav .nav-arrow:not(.next),
main.ritual-room:is(.sentence, .canvas) .room-nav .nav-arrow.next.is-skip {
  box-sizing: border-box;
  flex: 0 0 124px;
  width: 124px;
  min-width: 124px;
  max-width: 124px;
  min-height: 44px;
  height: 44px;
  padding: 0 12px;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--module-accent) 38%, transparent);
  border-radius: 5px;
  background: transparent;
  color: color-mix(in srgb, var(--module-accent) 82%, transparent);
  box-shadow: none;
  text-shadow: none;
  filter: none;
  transform: none;
  font: 500 10px/1.2 Arial, sans-serif;
  letter-spacing: .08em;
}
main.ritual-room:is(.sentence, .canvas) .room-nav .nav-arrow:is(:hover, :focus-visible):not(.next),
main.ritual-room:is(.sentence, .canvas) .room-nav .nav-arrow.next.is-skip:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--module-accent) 72%, transparent);
  background: color-mix(in srgb, var(--module-accent) 5%, transparent);
  color: var(--module-accent);
  box-shadow: none;
  filter: none;
  transform: none;
}
main.ritual-room:is(.sentence, .canvas) .room-nav .nav-arrow:not(.next):focus-visible,
main.ritual-room:is(.sentence, .canvas) .room-nav .nav-arrow.next.is-skip:focus-visible {
  outline: 2px solid var(--module-accent);
  outline-offset: 3px;
}
main.ritual-room:is(.sentence, .canvas) .room-nav .nav-arrow > span[aria-hidden="true"] {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

/* Keep sentence guidance visually anchored and centered beneath the input. */
main.ritual-room.sentence .sentence-bottom-input > .sentence-word-validation {
  width: 100%;
  text-align: center;
}

/* Leave the annual progress outside the reading frame, with a clear gap. */
main.ritual-room.sentence::after { bottom: 42px; }

/* Keep a clear keyboard cue on the instruction without framing the symbol. */
.landing.imprint-landing .imprint-start.imprint-logo:focus-visible {
  outline: none;
  filter: none;
}
.landing.imprint-landing .imprint-entry:has(.imprint-start:focus-visible) .imprint-instruction {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 600px) {
  main.ritual-room:is(.sentence, .canvas) { --brand-width: clamp(96px, 30vw, 116px); }
  main.ritual-room:is(.sentence, .canvas) .room-nav .nav-arrow:not(.next),
  main.ritual-room:is(.sentence, .canvas) .room-nav .nav-arrow.next.is-skip {
    flex-basis: 124px;
    width: 124px;
    min-width: 124px;
    max-width: 124px;
    min-height: 44px;
    height: 44px;
    padding: 0 10px;
    font-size: 9px;
  }
}
@media (max-width: 380px) {
  main.ritual-room:is(.sentence, .canvas) { --brand-width: clamp(96px, 30vw, 110px); }
}

/* A quiet, touch-sized account seal on phones. The accessible name remains. */
@media (max-width: 600px) {
  :is(.landing.imprint-landing, .ritual-room, .live-final) {
    --account-width: 44px;
    --account-height: 44px;
  }
  :is(.landing.imprint-landing, .ritual-room, .live-final) > .pluritual-header .account-button {
    flex-direction: row;
    gap: 0;
    padding: 0;
    border-radius: 8px;
  }
  .pluritual-header .account-button-label { display: none; }
  .pluritual-header .account-seal { width: 23px; height: 23px; flex: 0 0 23px; }
  main:is(.ritual-room.sentence, .ritual-room.canvas, .live-final) .admin-reset-button {
    top: calc(var(--chrome-top) + 30px);
    right: 70px;
    min-width: 62px;
    min-height: 20px;
    padding: 0 6px;
    font-size: 6px;
    transform: none;
  }
}

/* Keep the mobile profile entry anchored across home, modules and Live. */
@media (max-width: 900px), (max-width: 1024px) and (max-height: 500px) {
  :is(.landing.imprint-landing, .live-final) {
    --account-width: 40px;
    --account-height: 40px;
    --account-offset: 0px;
  }
  .landing.imprint-landing > header.pluritual-header {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-right: 16px;
  }
  .landing.imprint-landing > header.pluritual-header {
    grid-template-columns: minmax(0, 1fr) 40px;
  }
  .landing.imprint-landing > .pluritual-header .account-button { grid-column: 2; }
  .live-final > .pluritual-header .account-button {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: 16px;
    margin: 0;
  }
  :is(.landing.imprint-landing, .live-final) > .pluritual-header .account-button {
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    gap: 0;
  }
  :is(.landing.imprint-landing, .live-final) .account-button-label { display: none; }
  :is(.landing.imprint-landing, .live-final) .account-seal { width: 22px; height: 22px; flex: 0 0 22px; }
}