/* One authored paper/frame contract for setup, play, pause and result.
   Content switches in one grid cell; neither the paper nor the rollers do.
   The outer page may grow for narrow screens, enlarged text or an open list.
   Only the moving-stock/read aperture is cropped, never scene text/controls. */
html[data-session-release] #zineApp[data-word-press] {
  --wordstream-header-space: max(108px, 7rem);
  --sheet-top: calc(var(--roller-height) * .7);
  --sheet-bottom: calc(var(--feed-height) * .6);
  --sheet-side: 10px;
  --sheet-inset: clamp(1.5rem, 3vw, 3rem);
  --sheet-block-inset: clamp(1.5rem, 2.8vh, 2rem);
  /* At the normal 15px root size, 35rem forced 3px page overflow on720px
     windows. This phase-independent floor lets the existing svh row stretch
     to its available height; larger content still grows naturally. */
  --sheet-min-height: 34.75rem;
  height: auto;
  min-height: 100svh;
  max-height: none;
  overflow: visible;
  padding-top: var(--wordstream-header-space);
}
html[data-session-release] #zineApp[data-word-press] .zine-game {
  position: relative;
  height: auto;
  min-height: 0;
  grid-template-rows: minmax(min-content, 1fr);
  gap: 0;
}
html[data-session-release] #zineApp[data-word-press] .press-assembly {
  display: grid;
  grid-template: minmax(min-content, 1fr) / minmax(0, 1fr);
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet {
  position: relative;
  isolation: isolate;
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  grid-template: minmax(min-content, 1fr) auto / minmax(0, 1fr);
  align-content: stretch;
  min-width: 0;
  min-height: var(--sheet-min-height);
  margin: var(--sheet-top) var(--sheet-side) var(--sheet-bottom);
  /* The printed score label hangs below the top roller. Reserve its full
     footprint before any glyph, including accents on a long current word. */
  padding: max(3.5rem, var(--sheet-block-inset)) var(--sheet-inset) var(--sheet-block-inset);
  gap: .85rem;
  color: var(--ink);
}
/* The stock is the only painted paper in every phase. This stationary mask
   exposes its overscan while the stock travels; scene text stays unclipped. */
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet > .scene-paper {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  clip-path: none !important;
  transform: none !important;
  translate: none;
  rotate: none;
  scale: none;
  animation: none !important;
  filter: none;
  background: none;
  mask: none;
  overflow: hidden;
}
html[data-session-release] #zineApp[data-word-press] .scene-paper > .press-stock {
  z-index: -1;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet > .scene-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #17121e28 0, transparent 32px, transparent calc(100% - 30px), #17121e1c 100%);
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet > .press-window {
  grid-area: 1 / 1;
  position: relative;
  inset: auto;
  min-width: 0;
  min-height: 18rem;
  filter: none;
  /* The reading rows and gauge occupy this one cell above the controls. */
  margin-inline: calc(-1 * var(--sheet-inset));
}
html[data-session-release] #zineApp[data-word-press] .press-window .press-aperture-track {
  inset: 0 10px;
}
html[data-session-release] #zineApp[data-word-press] .press-ink-window {
  position: absolute;
  inset: 0;
  /* The fixed reading mouth ends before the gauge; an incoming fourth word
     cannot peek below it during a feed. The gauge is outside this mask. */
  clip-path: inset(0 0 calc(var(--transport-gauge-height) + var(--transport-lip-overlap)));
}
/* Roll contact belongs to the full sheet, not the reading-cell/controls seam. */
html[data-session-release] #zineApp[data-word-press] .press-window::after { content: none; }
html[data-session-release] #zineApp[data-word-press] .press-roller {
  z-index: 5;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .challenge-scene {
  grid-area: 1 / 1;
  position: relative;
  margin: 0;
  min-width: 0;
  min-height: min-content;
  container-type: normal;
  transform: none !important;
  translate: none;
  rotate: none;
  scale: none;
  animation: none !important;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-content {
  --print-rule: color-mix(in srgb, var(--ink) 42%, transparent);
  /* The impression has its own measure, not a report stretched between
     opposite paper edges. This never changes the shared reading cell. */
  width: min(100%, 40rem);
  justify-self: center;
  padding: 0;
  overflow: visible;
  min-height: min-content;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: .7rem;
  transform: none !important;
  animation: none !important;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-content::before,
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-content::after { content: none; }
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-content > * {
  grid-area: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-title {
  /* An older result rule sets justify-self:start on the heading itself;
     the parent's centered justify-items cannot override that child value. */
  justify-self: center;
  padding: 0;
  font: 900 clamp(3.2rem, 5.6vw, 5.8rem)/.98 var(--print-face);
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
  max-width: 11ch;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-hint {
  max-width: 27ch;
  font: 400 clamp(1.25rem, 1.65vw, 1.6rem)/1.25 var(--print-face);
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-best {
  align-self: auto;
  justify-self: center;
  padding: .3rem 0 0;
  border: 0;
  font: 400 clamp(1.2rem, 1.5vw, 1.45rem)/1.25 var(--print-face);
  text-align: center;
  text-transform: none;
  overflow-wrap: anywhere;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-best strong {
  display: inline;
  margin: 0 .2em;
  font-size: 1.15em;
  line-height: 1;
  white-space: normal;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .score-category {
  display: inline-block;
  float: none;
  margin: .2rem 0 0 .6em;
  font: 400 1rem/1.2 var(--print-face);
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .session-participant {
  /* The result name belongs to the score above. This chooser is the next
     attempt, never a second heading or a replacement for the previous name. */
  order: 1;
  grid-column: 1 / -1;
  justify-self: center;
  justify-content: center;
  align-items: baseline;
  width: min(100%, 40rem);
  margin: .7rem 0 0;
  text-align: left;
  font: 400 1.2rem/1.2 var(--print-face);
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-score {
  container-type: inline-size;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: .3rem .7rem;
  mask: none;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-score strong {
  font: 900 clamp(6rem, 10vw, 9.4rem)/.94 var(--print-face);
  /* Use the renderer's real digit count and this score column, not viewport
     width. A large score remains one number under enlarged text settings. */
  font-size: min(clamp(6rem, 10vw, 9.4rem), calc(140cqw / var(--score-length, 2)));
  letter-spacing: 0;
  white-space: nowrap;
  overflow-wrap: normal;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-score span {
  font: 400 clamp(1.4rem, 2vw, 1.8rem)/1.15 var(--print-face);
  text-transform: none;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-score .session-attempt-name {
  flex: 0 0 100%;
  min-width: 0;
  margin: .15rem 0 .2rem;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  text-align: center;
  overflow-wrap: anywhere;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-missed {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  justify-self: center;
  align-self: center;
  padding: 0;
  border: 0;
  gap: .15rem .4em;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-missed span { font: 400 1.2rem/1.2 var(--print-face); }
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-missed strong {
  max-width: 100%;
  font: 400 clamp(1.2rem, 1.65vw, 1.6rem)/1.2 var(--print-face);
  white-space: normal;
  overflow-wrap: anywhere;
  mask: none;
}
html[data-session-release] #zineApp[data-word-press][data-run-mode="challenge"]:is([data-phase="ending"], [data-phase="ended"]) .wordstream-sheet .scene-title {
  font-size: clamp(1.8rem, 2.65vw, 2.6rem);
  padding: .12em .28em .16em;
  color: var(--paper);
}
html[data-session-release] #zineApp[data-word-press][data-run-mode="challenge"]:is([data-phase="ending"], [data-phase="ended"]) .wordstream-sheet .session-participant { order: 1; }
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .zine-controls {
  position: relative;
  grid-area: 2 / 1;
  display: flex;
  flex-wrap: wrap;
  padding: 0 .3rem .25rem;
  min-height: 44px;
  gap: .9rem;
  justify-content: start;
  align-items: stretch;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .zine-controls .zine-button {
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  flex: 0 1 auto;
  padding: .55rem 1.5rem .7rem;
  font: 900 clamp(1.5rem, 2.3vw, 2.5rem)/1.1 var(--print-face);
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .zine-controls .zine-button:focus-visible { outline-color: var(--ink); }
/* Only the resting impression uses the centered action axis. The same
   permanent footer dimensions, reading track and live controls are retained. */
html[data-session-release] #zineApp[data-word-press][data-run-mode="challenge"]:is([data-phase="idle"], [data-phase="ending"], [data-phase="ended"]) .wordstream-sheet .zine-controls {
  justify-content: center;
}

/* Same print face in the open choice list and its closed selection. The
   in-flow list expands this same sheet; it cannot escape a clipped popup. */
#zineApp .participant-picker { flex: 1 1 12rem; min-width: 0; max-width: 100%; }
/* The neutral enhancement wrapper has no painted surface or semantics.
   Flatten only it, so the in-flow open list can use the impression's full
   measure instead of eight names squeezed into the trigger's narrow column. */
html[data-session-release] #zineApp .session-participant[data-participant-picker="ready"] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .75rem;
  row-gap: 0;
}
#zineApp [data-participant-picker="ready"] .participant-picker { display: contents; }
#zineApp [data-participant-picker="ready"] .participant-trigger { grid-column: 2; }
#zineApp [data-participant-picker="ready"] .participant-options { grid-column: 1 / -1; }
#zineApp .session-participant > label { padding-top: .8rem; }
#zineApp .participant-trigger,
#zineApp .participant-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  padding: .65rem .8rem;
  color: var(--ink);
  background: transparent;
  font: 400 1.4rem/1.15 var(--print-face);
  font-synthesis: none;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
#zineApp .participant-trigger { border-bottom: 2px solid var(--ink); font-weight: 900; }
#zineApp .participant-trigger > span:first-child { min-width: 0; flex: 1; }
#zineApp .participant-chevron { flex: 0 0 .5em; height: .5em; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; margin: -.3em .15em 0; }
#zineApp .participant-trigger[aria-expanded="true"] .participant-chevron { rotate: 225deg; margin-top: .2em; }
#zineApp .participant-options {
  margin: .45rem 0 0;
  padding: .35rem;
  display: grid;
  gap: .15rem;
  background: var(--paper) var(--stock) 63px 120px / 560px;
  border: 1px solid color-mix(in srgb, var(--ink) 50%, transparent);
  box-shadow: 1px 2px 1px #211d2430;
}
#zineApp .participant-option::before { content: ""; width: .8em; flex: 0 0 .8em; }
#zineApp .participant-option[aria-selected="true"]::before { content: "✓"; }
#zineApp .participant-option[aria-selected="true"] { font-weight: 900; }
#zineApp .participant-option:hover { background-color: var(--accent); }
#zineApp .participant-option:focus { background-color: var(--action); outline: 2px solid var(--ink); outline-offset: -2px; }
#zineApp .participant-trigger:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
#zineApp .participant-trigger:disabled { opacity: .55; }

@media (min-width: 901px) {
  #zineApp .participant-options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
}
@media (max-width: 900px) and (orientation: portrait) {
  html[data-session-release] #zineApp[data-word-press] { --wordstream-header-space: max(158px, calc(4.8rem + 85px)); --sheet-inset: 1.4rem; --sheet-side: 8px; --sheet-block-inset: 1.6rem; --sheet-min-height: 42rem; padding-inline: 12px; padding-bottom: 24px; }
  html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-title { font-size: 3.2rem; }
  html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .zine-controls .zine-button { flex: 1 1 auto; }
}
@media (orientation: landscape) and (max-height: 560px) {
  html[data-session-release] #zineApp[data-word-press] { --wordstream-header-space: max(92px, 7rem); --sheet-inset: 1.6rem; --sheet-block-inset: 1.4rem; }
  html[data-session-release] #zineApp[data-word-press] .wordstream-sheet .scene-title { font-size: 2.5rem; }
}
/* The paused words keep their reading cells. A small static impression in
   the spare top margin replaces the floating ticket over the drive. */
html[data-session-release] #zineApp[data-word-press] .press-pause-slip {
  top: calc(var(--sheet-top) + 1rem);
  right: calc(var(--sheet-side) + var(--sheet-inset));
  bottom: auto;
  left: auto;
  padding: 0;
  max-width: 35%;
  color: var(--ink);
  background: none;
  border: 0;
  box-shadow: none;
  rotate: none;
  font: 900 1.35rem/1 var(--print-face);
  text-transform: none;
  overflow-wrap: anywhere;
  pointer-events: none;
}
@media (forced-colors: active) {
  html[data-session-release] #zineApp[data-word-press] .wordstream-sheet > .scene-paper { border: 1px solid CanvasText; }
  #zineApp .participant-options { background: Canvas; border-color: CanvasText; box-shadow: none; }
  #zineApp :is(.participant-trigger, .participant-option) { color: CanvasText; }
  #zineApp .participant-option:focus {
    /* Retain the user's system highlight pair without Chromium adding a
       Canvas backplate behind white glyphs. The opt-out is focus-only. */
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    -webkit-text-fill-color: HighlightText;
    outline-color: Highlight;
  }
  #zineApp .participant-trigger:focus-visible { outline-color: Highlight; }
  html[data-session-release] #zineApp[data-word-press] .press-pause-slip { color: CanvasText; }
  html[data-session-release] #zineApp[data-word-press][data-run-mode="challenge"]:is([data-phase="ending"], [data-phase="ended"]) .wordstream-sheet .scene-title { color: CanvasText; }
}