/* Generated from ios/web/ios-english.css by scripts/sync-web-presentation.mjs.
 * Update the mobile source and run the generator; do not edit this copy. */
/* The paper grows upward while the machine and its controls stay still.
   The same empty notice band is retained through every answer/result phase. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .answer-dock[data-ios-composer=true] {
  --ios-notice-height: 48px;
  --ios-notice-gap: 6px;
  z-index: 6;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english][data-ios-paper=true] .question-panel {
  z-index: 5;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english][data-ios-keyboard=true][data-ios-paper=true] .question-panel {
  max-height: min(var(--ios-paper-question-height,76px),var(--ios-english-question-height,var(--ios-paper-question-height,76px)));
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english][data-ios-keyboard=true][data-ios-paper=true] .answer-dock[data-ios-composer=true]>:is(.answer-correction,.inline-error,.pp-inline-service,.ios-turn-note) {
  inset: auto 0 var(--ios-english-notice-offset,calc(100% + var(--ios-notice-gap)));
}
/* The scene publishes a control lane in frame coordinates. Both answer states
   share that lane; their existing grid row still owns the keyboard-safe bottom.
   Only the horizontal offset changes, so editing never replaces the live form. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .game-ui {
  --ios-typewriter-controls-inset: max(12px,var(--pati-safe-left));
  --ios-english-composer-height: 50px;
  --ios-notice-height: 48px;
  --ios-notice-gap: 6px;
  --ios-english-notice-reserve: 54px;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english][data-ios-playing=true] :is(.answer-dock[data-ios-composer=true],.round-continue) {
  position: relative;
  grid-column: 1 / -1;
  justify-self: start;
  width: min(100%,var(--ios-typewriter-controls-width,100%));
  max-width: none;
  margin-inline: 0;
  transform: translateX(calc(var(--ios-typewriter-controls-left,var(--ios-typewriter-controls-inset)) - var(--ios-typewriter-controls-inset)));
}
/* One concise message and a separate touch target fit the reserved band, even
   at 320px. Neither changes the live input's box or its selection/focus. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .answer-dock[data-ios-composer=true] > .inline-error {
  display: grid;
  grid-template-columns: minmax(0,1fr) 112px;
  align-items: center;
  gap: 8px;
  padding: 2px 6px;
  border-left: 2px solid var(--v11-accent);
  background: var(--v11-surface,var(--paper));
  color: var(--v11-ink);
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .answer-dock[data-ios-composer=true] .answer-notice-copy {
  min-width: 0;
  max-height: 44px;
  overflow: auto;
  overscroll-behavior: contain;
  font: 400 18px/1.12 var(--mono);
  overflow-wrap: break-word;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .answer-dock[data-ios-composer=true] .inline-error button[data-action=report] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 2px 4px;
  color: var(--v11-accent-text,var(--v11-accent));
  font: 400 19px/1.05 var(--mono);
  text-align: center;
  white-space: normal;
  text-underline-offset: 3px;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .answer-dock[data-ios-composer=true] .inline-error button[data-action=report]:focus-visible {
  outline: 2px solid var(--v11-accent);
  outline-offset: -2px;
}
@media (max-width:350px) {
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .game-ui {
    --ios-typewriter-controls-inset: 8px;
  }
}
/* A short landscape already has paper on the left and full-height keys on
   the right. Put feedback under the paper beside the composer, so keeping a
   permanent notice cannot push the fixed 44px keys into the top controls. */
@container (min-width:620px) and (max-height:460px) {
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english][data-typewriter-keyboard=true] .game-ui {
    --ios-english-notice-reserve: 0px;
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english][data-typewriter-keyboard=true] .game-ui .answer-dock[data-ios-composer=true] > :is(.answer-correction,.inline-error,.pp-inline-service,.ios-turn-note) {
    inset: auto auto 4px calc(max(12px,var(--pati-safe-left)) - var(--ios-typewriter-controls-left));
    width: calc(var(--ios-typewriter-controls-left) - max(12px,var(--pati-safe-left)) - 12px);
  }
}