/* Generated from ios/web/ios-feedback.css by scripts/sync-web-presentation.mjs.
 * Update the mobile source and run the generator; do not edit this copy. */
/* The result is a quiet composition inside the scene. Every text measure is
 * based on its actual clear column; English uses the paper's inner bounds. */
html[data-pati-web-design=mobile] .app-viewport[data-category] {
  --ios-feedback-surface: #123438;
  --ios-feedback-ink: #fff1d2;
  --ios-feedback-accent: #d2b16f;
  --ios-feedback-line: #8b7954;
  --ios-scene-ink: #f6ecd6;
  --ios-scene-muted: #e1ddcf;
  --ios-result-wash: rgba(8,27,30,.78);
  --ios-result-clear: rgba(8,27,30,0);
  --ios-rarity-common: #d5be86;
  --ios-rarity-clever: #a9d0b8;
  --ios-rarity-uncommon: #92c7c3;
  --ios-rarity-rare: #edc16e;
  --ios-rarity-deep: #c3afe3;
  --ios-rarity-unique: #e8a789;
}
html[data-pati-web-design=mobile] .app-viewport[data-category=general] {
  --ios-feedback-surface: #176B82;
  --ios-feedback-ink: #FFF6E4;
  --ios-feedback-accent: #FFF6E4;
  --ios-feedback-line: #176B82;
  --ios-scene-ink: #173f4c;
  --ios-scene-muted: #2f4b52;
  --ios-result-wash: rgba(255,246,226,.66);
  --ios-result-clear: rgba(255,246,226,0);
  --ios-rarity-common: #276b76;
  --ios-rarity-clever: #35735f;
  --ios-rarity-uncommon: #226d79;
  --ios-rarity-rare: #8b612c;
  --ios-rarity-deep: #695080;
  --ios-rarity-unique: #98533c;
}
html[data-pati-web-design=mobile] .app-viewport[data-category=sports] {
  --ios-feedback-surface: #0a192c;
  --ios-feedback-ink: #f4eddf;
  --ios-feedback-accent: #edbd53;
  --ios-feedback-line: #8f773d;
  --ios-scene-ink: #f4eddf;
  --ios-scene-muted: #b1c1d0;
  --ios-result-wash: rgba(5,17,32,.72);
  --ios-result-clear: rgba(5,17,32,0);
  --ios-rarity-common: #d8e4e9;
  --ios-rarity-clever: #8fdbd0;
  --ios-rarity-uncommon: #a7cbd7;
  --ios-rarity-rare: #f0c061;
  --ios-rarity-deep: #c2a3eb;
  --ios-rarity-unique: #f0a68e;
}
html[data-pati-web-design=mobile] .app-viewport[data-category=cinema] {
  --ios-feedback-surface: #123438;
  --ios-feedback-ink: #eee0c2;
  --ios-feedback-accent: #d2b16f;
  --ios-feedback-line: #8d7954;
}
html[data-pati-web-design=mobile] .app-viewport[data-category=english] {
  --ios-feedback-surface: #315D75;
  --ios-feedback-ink: #FFF3D7;
  --ios-feedback-accent: #d6c8a6;
  --ios-feedback-line: #9b906f;
  --ios-scene-ink: #30444b;
  --ios-scene-muted: #61716a;
  --ios-result-wash: transparent;
  --ios-rarity-common: #487875;
  --ios-rarity-clever: #47735e;
  --ios-rarity-uncommon: #397084;
  --ios-rarity-rare: #946734;
  --ios-rarity-deep: #6b5a8c;
  --ios-rarity-unique: #ad6250;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-card {
  --ios-rarity-ink: var(--ios-rarity-common);
  --ios-result-title: 20px;
  --ios-result-answer: 34px;
  --ios-result-points: 34px;
  --ios-result-caption: 17px;
  --ios-result-motif: 18px;
  position: absolute;
  top: var(--ios-answer-card-top,calc(var(--pati-safe-top) + 96px));
  left: var(--ios-answer-card-left,50%);
  transform: translateX(-50%);
  width: var(--ios-answer-card-width,min(560px,calc(100% - 48px)));
  max-width: calc(100% - 32px);
  max-height: min(380px,var(--ios-answer-card-room,380px));
  min-width: 0; min-height: 0;
  margin: 0; padding: 16px 8px;
  box-sizing: border-box;
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: transparent; border: 0; border-radius: 0;
  box-shadow: none; clip-path: none;
  color: var(--ios-scene-ink);
  font: 400 18px/1.4 var(--mono);
  letter-spacing: 0; text-align: center; text-indent: 0;
  text-transform: none; white-space: normal; text-shadow: none;
  overflow-wrap: anywhere; word-break: normal;
  isolation: isolate; z-index: 5;
  animation: pati-answer-arrive 200ms ease-out both;
}
/* A local fade supports the result text without washing out the whole scene.
 * It follows the measured result column, outside the text's scroll box. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-wash {
  position: absolute; left: var(--ios-answer-card-left,50%); right: auto;
  top: var(--ios-answer-card-top,0px);
  width: min(calc(var(--ios-answer-card-width,560px) + 24px),calc(100% - 8px));
  height: var(--ios-answer-wash-height,0px);
  margin: 0; padding: 0; border: 0; border-radius: 0;
  box-shadow: none; clip-path: none; transform: translateX(-50%);
  pointer-events: none; z-index: 4;
  background: radial-gradient(ellipse at center,var(--ios-result-wash) 64%,var(--ios-result-clear) 100%);
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-wash[hidden],
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .ios-answer-wash { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-card[hidden] { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-card > * {
  min-width: 0; max-width: 100%; max-inline-size: 100%;
  box-sizing: border-box; text-shadow: none;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-card[data-ios-answer-tier=tooclever] { --ios-rarity-ink: var(--ios-rarity-clever); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-card[data-ios-answer-tier=schooler] { --ios-rarity-ink: var(--ios-rarity-uncommon); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-card[data-ios-answer-tier=rare] { --ios-rarity-ink: var(--ios-rarity-rare); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-card[data-ios-answer-tier=deepcut] { --ios-rarity-ink: var(--ios-rarity-deep); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-card[data-ios-answer-tier=krillion] { --ios-rarity-ink: var(--ios-rarity-unique); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-card[data-ios-answer-tier=miss] { --ios-rarity-ink: var(--ios-scene-muted); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-kicker {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 10px; padding: 0;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-emblem {
  display: flex; align-items: center; justify-content: center;
  color: var(--ios-rarity-ink); width: var(--ios-result-motif); height: var(--ios-result-motif);
  flex: 0 0 var(--ios-result-motif);
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-emblem svg {
  display: block; width: var(--ios-result-motif); height: var(--ios-result-motif); flex: 0 0 var(--ios-result-motif);
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-tier {
  display: block; width: auto; min-width: 0; margin: 0; padding: 0;
  color: var(--ios-rarity-ink);
  font: 400 var(--ios-result-title)/1.1 var(--mono);
  letter-spacing: .06em; text-indent: .06em; text-transform: uppercase;
  white-space: normal; overflow-wrap: anywhere; word-break: normal;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-text {
  display: block; width: 100%; margin: 0; padding: 0;
  color: var(--ios-scene-ink);
  font: 400 var(--ios-result-answer)/1.2 var(--mono);
  letter-spacing: .015em; text-indent: 0; text-transform: none;
  white-space: normal; overflow-wrap: anywhere; word-break: normal;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-points {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px;
  width: 100%; margin: 10px 0 0; padding: 0;
  color: var(--ios-rarity-ink);
  font: 400 18px/1.1 var(--mono);
  letter-spacing: .04em; text-indent: 0; text-transform: none; white-space: normal;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-points strong {
  margin: 0; padding: 0; color: inherit;
  font: 400 var(--ios-result-points)/1 var(--mono);
  font-variant-numeric: tabular-nums; letter-spacing: 0; text-shadow: none;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-caption {
  display: block; width: 100%; max-width: 32ch; max-inline-size: min(100%,32ch);
  margin: 10px auto 0; padding: 0;
  color: var(--ios-scene-muted);
  font: 400 var(--ios-result-caption)/1.4 var(--mono);
  letter-spacing: .015em; text-indent: 0; text-transform: none;
  white-space: normal; overflow-wrap: anywhere; word-break: normal;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-feedback-size=wide] .ios-answer-card {
  --ios-result-title: 22px;
  --ios-result-answer: 40px;
  --ios-result-points: 38px;
  --ios-result-caption: 18px;
  --ios-result-motif: 20px;
  padding-top: 20px; padding-bottom: 20px;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-feedback-size=narrow] .ios-answer-card {
  --ios-result-title: 18px;
  --ios-result-answer: 28px;
  --ios-result-points: 30px;
  --ios-result-caption: 16px;
  --ios-result-motif: 16px;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-feedback-density=compact] .ios-answer-card {
  --ios-result-title: 18px;
  --ios-result-answer: 28px;
  --ios-result-points: 30px;
  --ios-result-caption: 16px;
  --ios-result-motif: 16px;
  padding-top: 8px; padding-bottom: 8px;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-feedback-density=compact] .ios-answer-kicker { gap: 6px; margin-bottom: 8px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-feedback-density=compact] .ios-answer-points { margin-top: 10px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-feedback-density=compact] .ios-answer-caption { margin-top: 10px; }
/* The English result uses only the paper's reserved prompt band. Readable
 * score-driven prose keeps its own space below; long answers scroll here. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .ios-answer-card.ios-answer-paper-result {
  --ios-result-answer: 26px;
  --ios-result-points: 28px;
  --ios-result-title: 18px;
  padding: 4px 2px;
  text-align: left;
  max-height: var(--ios-answer-card-room,86px);
  overflow: auto;
  scrollbar-gutter: stable;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .ios-answer-paper-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: baseline;
  column-gap: 10px;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .ios-answer-paper-result .ios-answer-text {
  min-width: 0;
  line-height: 1.1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .ios-answer-paper-result .ios-answer-points {
  width: auto;
  margin: 0;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: 16px;
  letter-spacing: 0;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .ios-answer-paper-result .ios-answer-tier {
  margin: 4px 0 0;
  line-height: 1.1;
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-feedback-stage=settled] .round-continue .primary-button {
  --v11-accent-ink: var(--ios-feedback-ink);
  background: var(--ios-feedback-surface); color: var(--ios-feedback-ink);
  border: 1px solid var(--ios-feedback-accent); box-shadow: none;
  min-height: 50px; padding: 12px 22px;
  font: 400 23px/1.1 var(--mono); letter-spacing: .045em;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=general][data-ios-feedback-stage=settled] .round-continue .primary-button { border-color: var(--ios-feedback-line); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-feedback-stage=settled] .round-continue .primary-button::after {
  display: inline; content: ' →'; position: static; width: auto; height: auto;
  background: none; color: inherit; border: 0; box-shadow: none;
}
@keyframes pati-answer-arrive { from { opacity: 0; } to { opacity: 1; } }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-feedback-motion=reduced] .ios-answer-card { animation: none; }
@media (prefers-reduced-motion:reduce) {
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-answer-card { animation: none; }
}