/* The daily ritual has a visible position and a separate contribution state.
   Navigation sits outside the work; moving never looks like submitting. */
main.ritual-room.has-module-navigation {
  --navigation-ink: var(--module-accent, #d4b878);
  --navigation-line: color-mix(in srgb, var(--navigation-ink) 36%, transparent);
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) 9px;
  gap: 8px;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: var(--chrome-top) var(--chrome-x) max(10px, env(safe-area-inset-bottom));
  overflow: hidden;
}
main.ritual-room.has-module-navigation > header.pluritual-header {
  --module-live-width: 100px;
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
}
main.ritual-room.has-module-navigation > header.pluritual-header.has-module-live-exit {
  --module-controls-width: calc(var(--module-live-width) + var(--account-height) + var(--account-width) + var(--module-control-gap) * 3);
  grid-template-columns: minmax(0, 1fr) var(--module-live-width) var(--account-height) var(--account-width);
}
main.ritual-room.has-module-navigation > header.pluritual-header.has-module-live-exit.has-work-access {
  --module-controls-width: calc(var(--module-live-width) + var(--account-height) * 2 + var(--account-width) + var(--module-control-gap) * 4);
  grid-template-columns: minmax(0, 1fr) var(--module-live-width) var(--account-height) var(--account-height) var(--account-width);
}
main.ritual-room.has-module-navigation > header.pluritual-header.has-module-live-exit .module-how-trigger { grid-column: 3; }
main.ritual-room.has-module-navigation > header.pluritual-header.has-module-live-exit .live-site-utilities { grid-column: 4; }
main.ritual-room.has-module-navigation > header.pluritual-header.has-module-live-exit .account-button { grid-column: 4; }
main.ritual-room.has-module-navigation > header.pluritual-header.has-module-live-exit.has-work-access .account-button { grid-column: 5; }
main.ritual-room.sentence.has-module-navigation .sentence-focus > .module-chapter {
  position: static;
  inset: auto;
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  transform: none;
  text-align: center;
  flex: 0 0 auto;
  color: #eee4cd;
  font: 400 clamp(30px, 4dvh, 42px)/1.12 var(--pluritual-serif, Georgia, serif);
  letter-spacing: -.035em;
}
main.ritual-room.has-module-navigation > .room-content {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 54px;
}
main.ritual-room.has-module-navigation > .annual-progress {
  position: static;
  inset: auto;
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  height: 9px;
  min-height: 0;
  margin: 0;
  padding: 0;
  transform: none;
}

/* Position changes the shape; confirmation changes the fill. Both states
   remain visible when a confirmed module is the current module. */
main.has-module-navigation > header.pluritual-header > .module-progress {
  position: absolute;
  z-index: 5;
  top: var(--account-offset);
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: min(314px, calc(100% - 2 * max(var(--brand-width) * 2.15, var(--module-controls-width))));
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transform: translateX(-50%);
  pointer-events: auto;
}
main.has-module-navigation .module-step {
  --step-color: var(--navigation-ink);
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 1 44px;
  width: 44px;
  height: 44px;
  min-width: 24px;
  min-height: 44px;
  max-width: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--step-color);
  box-shadow: none;
  font: 400 11px/1 var(--pluritual-sans, Arial, sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
  cursor: pointer;
  pointer-events: auto;
  transition: color 160ms ease;
}
main.has-module-navigation .module-step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid color-mix(in srgb, var(--step-color) 72%, transparent);
  border-radius: 50%;
  background: transparent;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
main.has-module-navigation .module-step.is-current { font-weight: 600; }
main.has-module-navigation .module-step.is-current::before {
  width: 24px;
  height: 6px;
  border: 1px solid var(--step-color);
  border-radius: 6px;
  background: color-mix(in srgb, var(--step-color) 20%, transparent);
  box-shadow: none;
}
main.has-module-navigation .module-step.is-confirmed::before { background: var(--step-color); border-color: var(--step-color); }
main.has-module-navigation .module-step:hover::before { background: color-mix(in srgb, var(--step-color) 20%, transparent); }
main.has-module-navigation .module-step.is-confirmed:hover::before { background: var(--step-color); }
main.has-module-navigation .module-step:focus-visible {
  outline: 2px solid var(--step-color);
  outline-offset: 1px;
}
main.has-module-navigation .module-step-number { display: none; }
main.has-module-navigation .module-step-check { display: none; }
main.has-module-navigation .module-step-check[hidden] { display: none; }

/* Desktop arrows occupy the margins, outside the reading surface or canvas. */
main.has-module-navigation > .module-side-navigation {
  position: absolute;
  z-index: 8;
  inset: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
main.has-module-navigation .module-nav-arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--navigation-ink);
  box-shadow: none;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 160ms ease;
}
main.has-module-navigation .module-nav-arrow.previous { left: max(12px, calc(var(--chrome-x) - 20px)); }
main.has-module-navigation .module-nav-arrow.next { right: max(12px, calc(var(--chrome-x) - 20px)); }
main.has-module-navigation .module-nav-arrow svg { display: block; width: 22px; height: 22px; }
main.has-module-navigation .module-nav-arrow:hover { background: transparent; opacity: .72; }
main.has-module-navigation .module-nav-arrow:focus-visible { outline: 2px solid var(--navigation-ink); outline-offset: 4px; }
main.has-module-navigation :is(.module-nav-arrow,.module-step):disabled { cursor: default; opacity: .4; }

main.ritual-room.has-module-navigation > header.pluritual-header > .module-live-exit {
  position: static;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--module-live-width);
  height: var(--account-height);
  min-height: 0;
  margin: var(--account-offset) 0 0;
  padding: 0;
  transform: none;
  pointer-events: auto;
}
main.ritual-room.has-module-navigation > header.pluritual-header > .module-live-exit[hidden] { display: none; }
main.has-module-navigation > .module-extra-action { grid-column: 1; grid-row: 2; align-self: end; display: flex; justify-content: center; }
main.has-module-navigation .module-view-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 9px;
  border: 1px solid var(--navigation-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--navigation-ink) 7%, transparent);
  color: var(--navigation-ink);
  box-shadow: none;
  font: 500 11px/1.2 var(--pluritual-sans, Arial, sans-serif);
  letter-spacing: .025em;
  text-transform: none;
  cursor: pointer;
  pointer-events: auto;
}
main.has-module-navigation .module-view-live:hover { background: color-mix(in srgb, var(--navigation-ink) 15%, transparent); }
main.has-module-navigation .module-view-live:focus-visible { outline: 2px solid var(--navigation-ink); outline-offset: 3px; }
main.has-module-navigation .module-view-live:disabled { cursor: default; opacity: .4; }

/* One focused, readable choice before closing unconfirmed contributions. */
dialog.results-confirmation {
  box-sizing: border-box;
  width: min(470px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 32px 28px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #baa9847a;
  border-radius: 12px;
  background: #fffaf2;
  color: #211f1a;
  box-shadow: 0 24px 70px #0004;
  font-family: var(--pluritual-sans, Arial, sans-serif);
  text-align: center;
}
dialog.results-confirmation::backdrop { background: #071010aa; }
.results-confirmation .confirmation-close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #70695f;
  font: 24px/1 var(--pluritual-sans, Arial, sans-serif);
  cursor: pointer;
}
.results-confirmation .confirmation-close svg { width: 16px; height: 16px; }
.results-confirmation .confirmation-close:hover { background: #211f1a0c; }
.results-confirmation .confirmation-kicker { margin: 0 28px 10px; color: #8b7857; font: 400 10px/1.4 var(--pluritual-sans, Arial, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.results-confirmation h2 { margin: 0 10px 13px; font: 400 32px/1.12 var(--pluritual-serif, Georgia, serif); letter-spacing: -.025em; }
.results-confirmation p { margin: 0; color: #746f66; font: 400 13px/1.55 var(--pluritual-sans, Arial, sans-serif); }
.results-confirmation .confirmation-module-list { display: grid; gap: 0; margin: 22px 0; padding: 0; list-style: none; border-block: 1px solid #ab95732c; }
.results-confirmation .confirmation-module-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 49px; padding: 8px 0; text-align: left; }
.results-confirmation .confirmation-module-list li + li { border-top: 1px solid #ab95731c; }
.results-confirmation .confirmation-module-list strong,
.results-confirmation .confirmation-module-list li > span:nth-child(2) { color: #292720; font: 400 17px/1.2 var(--pluritual-serif, Georgia, serif); }
.results-confirmation .confirmation-module-icon { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #b3aa98; border-radius: 50%; color: #8c897b; }
.results-confirmation .confirmation-module-icon svg { display: block; width: 12px; height: 12px; }
.results-confirmation .is-confirmed .confirmation-module-icon { border-color: #211f1a; background: #211f1a; color: #fffaf2; }
.results-confirmation .confirmation-module-status { color: #898575; font: 400 11px/1.3 var(--pluritual-sans, Arial, sans-serif); }
.results-confirmation .is-confirmed .confirmation-module-status { color: #211f1a; }
.results-confirmation .confirmation-actions { display: grid; gap: 9px; margin-top: 22px; }
.results-confirmation .confirmation-actions button { width: 100%; min-height: 46px; padding: 11px 12px; border: 1px solid #211f1a66; border-radius: 6px; background: transparent; color: #211f1a; font: 500 13px/1.3 var(--pluritual-sans, Arial, sans-serif); cursor: pointer; }
.results-confirmation .confirmation-actions button:first-child { border-color: #211f1a; background: #211f1a; color: #fffaf2; font-weight: 600; }
.results-confirmation .confirmation-actions button:first-child:hover { background: #11110e; }
.results-confirmation .confirmation-actions button + button:hover { background: #211f1a09; }
.results-confirmation button:focus-visible { outline: 2px solid #211f1a; outline-offset: 3px; }

@media (min-width: 901px) and (min-height: 501px) {
  main.ritual-room.sentence.has-module-navigation .sentence-focus,
  main.ritual-room.sentence.has-module-navigation .sentence-focus.has-pool {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    height: 100%;
    min-height: 0;
    padding-block: 12px;
  }
  main.ritual-room.sentence.has-module-navigation .sentence-official-sheet {
    flex: 0 1 auto;
    height: min(45dvh, calc(100% - 180px));
    min-height: 0;
  }
  main.ritual-room.sentence.has-module-navigation .sentence-bottom-input { flex: 0 0 auto; margin: 0 auto; }
  main.ritual-room.sentence.has-module-navigation .sentence-phrase-wrap { height: 100%; min-height: 0; }
  main.ritual-room.sentence.has-module-navigation .official-line { height: 100%; min-height: 0; max-height: 100%; }
  main.ritual-room.canvas.has-module-navigation > .room-content { container-type: size; }
  main.ritual-room.canvas.has-module-navigation .canvas-v111-layout { --canvas-width: min(900px, calc((100cqh - 80px) * .831), calc(100vw - 640px)); }
}
@media (min-width: 901px) and (max-width: 1200px) and (min-height: 501px) {
  main.ritual-room.canvas.has-module-navigation .canvas-v111-layout { --canvas-width: min(640px, calc((100cqh - 80px) * .831), calc(100vw - var(--chrome-x) - var(--chrome-x) - 452px)); }
}
@media (min-width: 901px) and (max-width: 1100px) and (min-height: 501px) {
  /* A symbol-only imprint keeps the centered markers clear of all four tools. */
  main.ritual-room.has-module-navigation > header.pluritual-header {
    --account-width: var(--account-height);
    --brand-width: min(171px, calc((100vw - var(--chrome-x) - var(--chrome-x) - 176px) / 4.3));
  }
  main.ritual-room.has-module-navigation > header.pluritual-header .account-button { gap: 0; padding: 0; }
  main.ritual-room.has-module-navigation > header.pluritual-header .account-button-label { display: none; }
}

@media (max-width: 900px), (max-width: 1024px) and (max-height: 500px) {
  main.ritual-room.has-module-navigation { grid-template-rows: auto minmax(0, 1fr) 9px; gap: 8px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  main.ritual-room.has-module-navigation > header.pluritual-header {
    --module-live-width: 76px;
    grid-template-rows: auto;
    row-gap: 0;
    padding-bottom: 32px;
  }
  main.ritual-room.has-module-navigation > header.pluritual-header.has-module-live-exit {
    --module-controls-width: calc(var(--account-height) + var(--account-width) + var(--module-control-gap) * 2);
    grid-template-columns: minmax(0, 1fr) var(--account-height) var(--account-width);
  }
  main.ritual-room.has-module-navigation > header.pluritual-header.has-module-live-exit.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.has-module-navigation > header.pluritual-header.has-module-live-exit .module-how-trigger { grid-column: 2; }
  main.ritual-room.has-module-navigation > header.pluritual-header.has-module-live-exit .live-site-utilities { grid-column: 3; }
  main.ritual-room.has-module-navigation > header.pluritual-header.has-module-live-exit .account-button { grid-column: 3; }
  main.ritual-room.has-module-navigation > header.pluritual-header.has-module-live-exit.has-work-access .account-button { grid-column: 4; }
  main.ritual-room.has-module-navigation > .room-content { padding: 0; touch-action: pan-y pinch-zoom; }
  /* The browser checks touch-action only up to the first scroll container.
     Nested readers and clipped frames must declare the axis themselves. */
  main.ritual-room.has-module-navigation,
  main.ritual-room.sentence.has-module-navigation :is(.official-line,.sentence-phrase-wrap,.sentence-official-sheet),
  main.ritual-room.canvas.has-module-navigation :is(.canvas-art-frame,.canvas-daily-reveal.is-details-open) {
    touch-action: pan-y pinch-zoom;
  }
  main.has-module-navigation > header.pluritual-header > .module-progress { top: auto; bottom: -6px; width: min(314px, calc(100% - 88px)); }
  main.has-module-navigation > header.pluritual-header.has-module-live-exit > .module-progress { left: calc(50% - 16px); width: min(314px, calc(100% - 120px)); }
  /* The header's compact lower line keeps fallback controls off the artwork. */
  main.has-module-navigation > .module-side-navigation {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 32px;
  }
  main.has-module-navigation .module-nav-arrow { position: static; transform: none; }
  main.has-module-navigation .module-nav-arrow.next { margin-left: auto; }
  main.has-module-navigation .module-nav-arrow svg { width: 19px; height: 19px; }
  main.has-module-navigation .module-nav-arrow:focus-visible { outline-offset: -4px; }
  main.ritual-room.has-module-navigation > header.pluritual-header > .module-live-exit { position: absolute; right: 0; bottom: -6px; height: 44px; margin: 0; }
  main.has-module-navigation .module-view-live { gap: 4px; min-height: 44px; padding-inline: 6px; font-size: 10px; }
  main.ritual-room.sentence.has-module-navigation .sentence-focus,
  main.ritual-room.sentence.has-module-navigation .sentence-focus.has-pool { height: 100%; min-height: 0; gap: clamp(10px, 2dvh, 18px); padding-bottom: clamp(6px, 2dvh, 16px); }
  main.ritual-room.sentence.has-module-navigation .sentence-focus > .module-chapter { font-size: clamp(30px, 8vw, 38px); }
  /* The header stays still while the content and its inert neighbor move. */
  main.ritual-room.has-module-navigation:is(.is-module-dragging,.is-module-settling) {
    transform: none;
    animation: none;
  }
  main.ritual-room.has-module-navigation.is-module-dragging { transition: none; user-select: none; }
  main.ritual-room.has-module-navigation.is-module-settling { transition: none; }
  main.ritual-room.has-module-navigation.module-swipe-entering {
    transform: none;
    animation: none;
  }
  main.ritual-room.has-module-navigation:is(.is-module-dragging,.is-module-settling,.module-swipe-entering) > .room-content {
    transform: translate3d(var(--module-drag-x, var(--module-entry-x, 0px)), 0, 0);
    will-change: transform;
    animation: none;
    transition: none;
  }
  main.has-module-navigation > :is(header.pluritual-header,.module-side-navigation,.annual-progress) { z-index: 12; }
  main.has-module-navigation > .room-content { z-index: 2; }
  .module-swipe-neighbor {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(var(--module-neighbor-x, 100vw), 0, 0);
    pointer-events: none;
    user-select: none;
    will-change: transform;
  }
  .module-swipe-neighbor > main.ritual-room.has-module-navigation { height: 100%; animation: none; transform: none; }
  .module-swipe-neighbor > main > :is(header.pluritual-header,.module-side-navigation,.annual-progress) { visibility: hidden; }
  .module-swipe-neighbor > main > .room-content { animation: none; transform: none; }
  main.ritual-room.canvas .canvas-art-mount { touch-action: pan-y pinch-zoom; }
}
@keyframes module-swipe-enter {
  from { transform: translate3d(var(--module-entry-x, 100vw), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@media (max-width: 360px) {
  dialog.results-confirmation { width: calc(100vw - 24px); padding: 30px 18px 18px; }
  .results-confirmation h2 { font-size: 28px; }
  .results-confirmation .confirmation-module-list { margin-block: 17px; }
  .results-confirmation .confirmation-module-list li { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 7px; }
  .results-confirmation .confirmation-module-list strong,
  .results-confirmation .confirmation-module-list li > span:nth-child(2) { font-size: 15px; }
  .results-confirmation .confirmation-module-status { font-size: 10px; }
  .results-confirmation .confirmation-actions { margin-top: 17px; }
}
@media (max-height: 500px) {
  dialog.results-confirmation { padding-top: 26px; }
  .results-confirmation .confirmation-module-list { margin-block: 12px; }
  .results-confirmation .confirmation-module-list li { min-height: 39px; padding-block: 5px; }
  .results-confirmation .confirmation-actions { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  main.has-module-navigation .module-step,
  main.has-module-navigation .module-step::before,
  main.has-module-navigation .module-nav-arrow { transition: none; }
  main.ritual-room.has-module-navigation.is-module-settling { transition: none; }
  main.ritual-room.has-module-navigation.module-swipe-entering { animation: none; }
}