/* Image 10, approved by Julien. WIP-only skin; native reader/actions stay intact. */
body[data-member-studio] #app main.ritual-room.sentence {
  background:
    radial-gradient(ellipse at 50% 45%, #0e16174d, #0b1012a3),
    url('sentence-paper-texture-v015ad.png') center / cover no-repeat,
    #080e11;
}
body[data-member-studio] #app main.ritual-room.sentence::before,
body[data-member-studio] #app main.ritual-room.sentence::after {
  content: none !important;
  display: none !important;
}
body[data-member-studio] #app main.ritual-room.sentence > .room-content {
  container-type: size;
  padding: 0;
  overflow: visible;
  isolation: isolate;
}
body[data-member-studio] #app main.ritual-room.sentence .sentence-focus {
  --chapter-width: min(92cqw, 1040px);
  --chapter-scale: min(var(--chapter-width), 118cqh);
  --chapter-top-depth: clamp(28px, calc(var(--chapter-scale) * .078), 84px);
  --chapter-bottom-depth: clamp(50px, calc(var(--chapter-scale) * .082), 88px);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: var(--chapter-width);
  max-width: 100%;
  height: calc(100% - 24px);
  min-height: 0;
  margin: 12px auto;
  padding: calc(var(--chapter-top-depth) * .8 + 8px) max(24px, calc(var(--chapter-width) * .055)) 112px;
  gap: clamp(8px, 1.2cqh, 16px);
  justify-content: flex-start;
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
}
body[data-member-studio] #app main.ritual-room.sentence .sentence-focus::before {
  --chapter-cast-x: clamp(5px, calc(var(--chapter-scale) * .016), 16px);
  --chapter-cast-y: clamp(8px, calc(var(--chapter-scale) * .024), 24px);
  --chapter-cast-blur: clamp(5px, calc(var(--chapter-scale) * .014), 14px);
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 0 solid transparent;
  border-image-source: url('chapter-scroll-approved.svg');
  border-image-slice: 125 45 180 45 fill;
  border-image-width: var(--chapter-top-depth) calc(var(--chapter-width) * .040909) var(--chapter-bottom-depth) calc(var(--chapter-width) * .040909);
  border-image-repeat: stretch;
  /* Project the cut-out silhouette down and to the right onto the support. */
  filter: brightness(.45) saturate(1.4) hue-rotate(8deg)
    drop-shadow(0 1px .8px #000a)
    drop-shadow(var(--chapter-cast-x) var(--chapter-cast-y) var(--chapter-cast-blur) #000a);
}
body[data-member-studio] #app main.ritual-room.sentence .sentence-focus::after {
  /* The nine-sliced artwork ends 31/180 of the lower slice above the box.
     Anchor contact there, then soften the roll's shadow across the support. */
  --chapter-shadow-depth: clamp(24px, calc(var(--chapter-bottom-depth) * .65), 56px);
  content: '';
  position: absolute;
  z-index: -2;
  pointer-events: none;
  left: 2.5%;
  right: 1.5%;
  height: var(--chapter-shadow-depth);
  bottom: calc(var(--chapter-bottom-depth) * .172222 - var(--chapter-shadow-depth) * .62);
  background:
    radial-gradient(ellipse 49% 10% at 50% 38%, #000c 0%, #000a 52%, #0005 78%, #0000 100%),
    radial-gradient(ellipse 49% 32% at 50.5% 47%, #0007 0%, #0005 42%, #0002 72%, #0000 100%),
    radial-gradient(ellipse 48% 44% at 51% 56%, #0004 0%, #0002 45%, #0000 100%);
}
body[data-member-studio] #app main.ritual-room.sentence .sentence-focus > .module-chapter {
  flex: 0 0 auto;
  margin: 0;
}
/* Matte ink: no floating shadow, with a static, shallow variation in coverage.
   The grain only affects the printed lines/title; scrolling, inputs and word
   actions remain native. No displacement or blur is applied to the glyphs. */
body[data-member-studio] #app main.ritual-room.sentence .sentence-focus :is(.module-chapter, .official-line) {
  color: rgb(237 225 198 / .94);
  text-shadow: none;
}
body[data-member-studio] #app main.ritual-room.sentence .sentence-focus :is(.module-chapter, .sentence-month-line) {
  --chapter-ink-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .5 0 0 0 .65'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23grain)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--chapter-ink-grain);
  mask-image: var(--chapter-ink-grain);
  -webkit-mask-size: 160px 160px;
  mask-size: 160px 160px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
@media (forced-colors: active), (prefers-contrast: more) {
  body[data-member-studio] #app main.ritual-room.sentence .sentence-focus :is(.module-chapter, .sentence-month-line) {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
body[data-member-studio] #app main.ritual-room.sentence .sentence-official-sheet {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  width: 100%;
  margin: 0;
  background: none;
}
body[data-member-studio] #app main.ritual-room.sentence .sentence-phrase-wrap {
  height: 100%;
  min-height: 0;
}
body[data-member-studio] #app main.ritual-room.sentence .sentence-focus .official-line {
  --chapter-text-fade: clamp(24px, 1.05em, 44px);
  /* Smoothstep opacity eases into the paper and the fully visible text. */
  --chapter-text-mask: linear-gradient(to bottom,
    transparent,
    rgb(0 0 0 / .104) calc(var(--chapter-text-fade) * .2),
    rgb(0 0 0 / .352) calc(var(--chapter-text-fade) * .4),
    rgb(0 0 0 / .648) calc(var(--chapter-text-fade) * .6),
    rgb(0 0 0 / .896) calc(var(--chapter-text-fade) * .8),
    #000 var(--chapter-text-fade),
    #000 calc(100% - var(--chapter-text-fade)),
    rgb(0 0 0 / .896) calc(100% - var(--chapter-text-fade) * .8),
    rgb(0 0 0 / .648) calc(100% - var(--chapter-text-fade) * .6),
    rgb(0 0 0 / .352) calc(100% - var(--chapter-text-fade) * .4),
    rgb(0 0 0 / .104) calc(100% - var(--chapter-text-fade) * .2),
    transparent);
  height: 100%;
  max-height: 100%;
  /* Inset both ends so the first month and final word clear the viewport fades. */
  padding: var(--chapter-text-fade) 12px max(28px, var(--chapter-text-fade));
  -webkit-mask-image: var(--chapter-text-mask);
  mask-image: var(--chapter-text-mask);
  overscroll-behavior: contain;
  scrollbar-width: none;
  scrollbar-gutter: auto;
  outline: none;
}
body[data-member-studio] #app main.ritual-room.sentence .sentence-focus .official-line::-webkit-scrollbar {
  display: none;
}
body[data-member-studio] #app main.ritual-room.sentence .sentence-focus:has(.official-line:focus-visible) > .module-chapter {
  text-decoration: underline;
  text-decoration-color: #d4b87866;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
body[data-member-studio] #app main.ritual-room.sentence .wip-inline-action {
  position: absolute;
  bottom: calc(var(--chapter-scale) * .012);
  left: 50%;
  width: calc(100% - max(48px, var(--chapter-width) * .12));
  height: auto;
  min-height: 0;
  margin: 0;
  transform: translateX(-50%);
}
body[data-member-studio] #app main.ritual-room.sentence .wip-inline-action .sentence-voice-row {
  min-height: 60px;
}
body[data-member-studio] #app main.ritual-room.sentence .wip-inline-action .sentence-word-validation {
  margin-top: 0;
}
@media (max-width: 900px) {
  body[data-member-studio] #app main.ritual-room.sentence .sentence-focus {
    --chapter-width: 100cqw;
    height: calc(100% - 12px);
    margin-block: 6px;
    padding-inline: max(22px, calc(var(--chapter-width) * .06));
  }
  body[data-member-studio] #app main.ritual-room.sentence .sentence-focus .official-line {
    padding-inline: 2px;
    padding-bottom: max(20px, var(--chapter-text-fade));
  }
  body[data-member-studio] #app main.ritual-room.sentence .wip-inline-action .sentence-voice-row {
    min-height: 56px;
  }
}
@media (max-height: 600px) {
  body[data-member-studio] #app main.ritual-room.sentence .sentence-focus {
    gap: 6px;
    padding-block: calc(var(--chapter-top-depth) * .8) 100px;
  }
  body[data-member-studio] #app main.ritual-room.sentence .sentence-focus > .module-chapter {
    font-size: 24px;
    line-height: 1.1;
  }
  body[data-member-studio] #app main.ritual-room.sentence .wip-inline-action .sentence-word-validation {
    margin-top: 0;
    min-height: 16px;
  }
}
@media (max-width: 900px) {
  body[data-member-studio] #app.is-mobile-word-editing main.ritual-room.sentence .sentence-focus {
    padding-block: calc(var(--chapter-top-depth) * .8) 68px;
    gap: 6px;
  }
}

/* A proposal can be tried in the last line of the chapter. */
body[data-member-studio] .unified-sentence-results .live-voice-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
}
body[data-member-studio] .unified-sentence-results .live-voice-preview[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px #e0c687b8;
}
body[data-member-studio] .unified-sentence-results .live-voice-preview:focus-visible {
  outline: 2px solid #e0c687;
  outline-offset: -2px;
}
@media (hover: hover) {
  body[data-member-studio] .unified-sentence-results .live-voice-preview:hover {
    background: #e0c68712;
  }
}
body[data-member-studio] main.ritual-room.sentence .unified-sentence-candidates.is-previewed .live-next-word-cycle > span {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Anchor the paper and its shadows to the two reading rows, in column one. */
body[data-member-studio] #app main.ritual-room.sentence.results-visible {
  --unified-panel-gap: clamp(18px, 1.65vw, 28px);
}
body[data-member-studio] #app main.ritual-room.sentence .unified-sentence-work {
  --chapter-width: min(1040px, calc(100cqw - var(--unified-panel-width) - var(--unified-panel-gap)));
  --chapter-reader-bottom: calc(var(--chapter-bottom-depth) + 10px);
  width: calc(var(--chapter-width) + var(--unified-panel-width) + var(--unified-panel-gap));
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: clamp(8px, 1.2cqh, 16px);
  column-gap: var(--unified-panel-gap);
  padding: 0;
  transition: width var(--unified-motion) var(--unified-easing),
    grid-template-columns var(--unified-motion) var(--unified-easing),
    column-gap var(--unified-motion) var(--unified-easing);
}
body[data-member-studio] #app main.ritual-room.sentence .unified-sentence-work::before,
body[data-member-studio] #app main.ritual-room.sentence .unified-sentence-work::after {
  grid-area: 1 / 1 / 3 / 2;
}
body[data-member-studio] #app main.ritual-room.sentence .unified-sentence-work > .module-chapter {
  padding-top: calc(var(--chapter-top-depth) * .8 + 8px);
}
body[data-member-studio] #app main.ritual-room.sentence .unified-sentence-work > .sentence-official-sheet {
  box-sizing: border-box;
  padding-inline: max(22px, calc(var(--chapter-width) * .055));
  padding-bottom: var(--chapter-reader-bottom);
}
body[data-member-studio] .unified-sentence-results > .chapter-breath-action {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding-block-start: 8px;
}
body[data-member-studio] #app main.ritual-room.sentence .chapter-breath-action .live-breath-panel {
  justify-content: flex-end;
  max-width: 100%;
}
body[data-member-studio] #app main.ritual-room.sentence.results-visible .unified-sentence-work > .unified-sentence-results {
  --chapter-live-panel-offset: calc(var(--chapter-top-depth) * .17);
  align-self: start;
  margin-top: var(--chapter-live-panel-offset);
  max-height: calc(100% - var(--chapter-live-panel-offset));
}
@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 501px) {
  body[data-member-studio] #app main.ritual-room.sentence .unified-sentence-work {
    --chapter-width: 100cqw;
    --chapter-reader-bottom: calc(var(--chapter-bottom-depth) * .78);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 0px);
    row-gap: 0;
    transition: grid-template-rows var(--unified-motion) var(--unified-easing),
      row-gap var(--unified-motion) var(--unified-easing);
  }
  body[data-member-studio] #app main.ritual-room.sentence.results-visible .unified-sentence-work {
    grid-template-rows: auto minmax(0, 1fr) minmax(0, min(52cqh, max(290px, var(--unified-panel-height))));
    row-gap: 8px;
  }
  body[data-member-studio] #app main.ritual-room.sentence.results-visible .unified-sentence-work > .unified-sentence-results {
    --chapter-live-panel-offset: 8px;
    align-self: stretch;
    height: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-member-studio] #app main.ritual-room.sentence .unified-sentence-work { transition: none; }
}