
.cm.read-page {
  --pp-pencil: var(--pp-graphite, #3a3f45);
}

.cm.read-page.rp-pinning .cm-options { display: none; }

.cm.read-page .rp-standing {
  margin: 0 0 var(--rp, 1.6rem);
  min-height: var(--rp, 1.6rem);
  font-family: var(--font-hand);
  font-size: 1.02rem;
  line-height: var(--rp, 1.6rem);
  color: var(--pp-pencil, #3a3f45);
  opacity: 0.9;
  transform: rotate(-0.5deg);
  transform-origin: left center;
}

.cm.read-page .rp-confirm {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 var(--rp, 1.6rem);
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1.5px solid transparent;
  background: none;
  font-family: var(--font-type);
  font-size: 0.72rem;
  letter-spacing: var(--track-type, 0.06em);
  text-transform: uppercase;
  color: var(--pp-type-faint, rgba(34, 36, 43, 0.7));
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color var(--pp-t-lift, 140ms) var(--pp-ease-paper, ease),
              border-bottom-color var(--pp-t-lift, 140ms) var(--pp-ease-paper, ease);
}
.cm.read-page .rp-confirm.is-ready {
  color: var(--pp-type, #22242b);
  border-bottom-color: var(--pp-graphite, #3a3f45);
  cursor: pointer;
}
.cm.read-page .rp-confirm:focus-visible {
  outline: 2px solid var(--pp-graphite, #3a3f45);
  outline-offset: 3px;
}
#choice-menu.read-seat .rp-margin .rp-confirm { margin: 0.15rem 0 0.1rem; }
@media (pointer: coarse) {
  #choice-menu.read-seat .cm.read-page .rp-confirm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

.cm.read-page .rp-say,
.cm.read-page .cm-options .rp-said {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.clipping.rp-pinned {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--pp-graphite, #3a3f45),
              var(--pp-shadow-lift, 0 3px 7px rgba(0, 0, 0, 0.52));
}
.clipping .rp-pin {
  position: absolute;
  top: -5px;
  left: -4px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: var(--plate-pin-sprites, url('../assets/ui/pin-sprites.png')) no-repeat;
  background-size: 163.3px 81.6px;
  background-position: -6.1px -10.2px;
  filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}
.clipping.is-text .rp-pin { left: auto; right: -4px; }
#choice-menu.read-seat .cm.read-page.rp-board .rp-clips {
  padding-top: 10px;
  padding-left: 6px;
  padding-right: 6px;
}
.clipping.rp-pinned { overflow: visible; }
.clipping.rp-pinned .clip-art { border-radius: 1px; }

@media (prefers-reduced-motion: reduce) {
  .clipping.rp-pinned { transition: none; }
}

.cm.read-page .cm-options button.rp-struck .opt-text {
  text-decoration-line: line-through;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: none;
  transition: text-decoration-color 180ms var(--pp-ease-paper, ease);
}
.cm.read-page .cm-options button.rp-struck.rp-struck-in .opt-text {
  text-decoration-color: var(--pp-pencil, #3a3f45);
}
.cm.read-page .cm-options button.rp-struck:hover .opt-text,
.cm.read-page .cm-options button.rp-struck:focus-visible .opt-text {
  background-size: 0% 1.5px;
}
.cm.read-page .cm-options button.rp-struck { cursor: default; }
.cm.read-page .cm-options button.rp-struck:focus-visible {
  outline: 2px solid var(--pp-graphite, #3a3f45);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cm.read-page .cm-options button.rp-struck .opt-text { transition: none; }
}
#stage.read-cut .cm.read-page .cm-options button.rp-struck .opt-text { transition: none; }

@media (max-width: 640px) and (orientation: portrait) {
  #choice-menu.read-seat .cm.read-page.rp-board .rp-clips { padding-right: 0.6rem; }
  #choice-menu.read-seat .rp-margin .rp-confirm { margin: 0 0 var(--rp, 1.6rem); }
  #choice-menu.read-seat .cm.read-page .rp-confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    text-align: center;
    padding: 0.55rem 0 0.5rem;
    font-size: 0.78rem;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  #choice-menu.read-seat .cm.read-page.rp-board .rp-clips { padding-right: 0.6rem; }
  #choice-menu.read-seat .rp-margin .rp-confirm { margin: 0 0 0.6rem; }
  #choice-menu.read-seat .cm.read-page .rp-confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    text-align: center;
    padding: 0.55rem 0 0.5rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 640px) and (orientation: portrait), (orientation: landscape) and (max-height: 500px) {
  #choice-menu.read-seat .cm.read-page.rp-pinning .cm-head { margin-bottom: 0.8rem; }
  #choice-menu.read-seat .cm.read-page .rp-standing { margin-bottom: 0.5rem; }
  #choice-menu.read-seat .cm.read-page.rp-board:not(.rp-pinning) .rp-margin { margin-bottom: 0.6rem; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #choice-menu.read-seat .cm.read-page.rp-pinning .cm-head { margin-bottom: 0.4rem; }
  #choice-menu.read-seat .cm.read-page .rp-standing { margin-bottom: 0.3rem; }
}
