/* Generated from ios/web/ios-clock.css by scripts/sync-web-presentation.mjs.
 * Update the mobile source and run the generator; do not edit this copy. */
/* One native dial in all four worlds, with or without the system keyboard. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] {
  --ios-clock-face: #0e2c31;
  --ios-clock-rim: #4d7075;
  --ios-clock-accent: #eed28b;
  --ios-clock-danger: #ff7165;
}
/* The two light input themes use the same filled surface as their submit key.
 * Following the theme variables also keeps future button palette edits in sync. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=general] {
  --ios-clock-face: var(--v11-accent,#176B82);
  --ios-clock-rim: var(--v11-accent-ink,#FFF6E4);
  --ios-clock-accent: var(--v11-accent-ink,#FFF6E4);
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=sports] {
  --ios-clock-face: #0a111e;
  --ios-clock-rim: #344c65;
  --ios-clock-accent: #f3c34f;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=cinema] {
  --ios-clock-face: #12292c;
  --ios-clock-rim: #527371;
  --ios-clock-accent: #dfbd78;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] {
  --ios-clock-face: var(--v11-accent,#315D75);
  --ios-clock-rim: var(--v11-accent-ink,#FFF3D7);
  --ios-clock-accent: var(--v11-accent-ink,#FFF3D7);
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] {
  --ios-row-clock: 46px;
  --ios-clock-dock-padding: calc(7px - 7px * var(--pati-keyboard-progress,0));
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .answer-dock[data-ios-composer=true] {
  --ios-clock-dock-padding: 0px;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] .countdown[data-ios-clock] {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ios-clock-face);
  color: var(--ios-clock-accent);
  box-shadow: none;
  clip-path: none;
  overflow: hidden;
  font: 400 25px/1 var(--mono);
  letter-spacing: 0;
  transform: none;
  isolation: isolate;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .countdown[data-ios-clock]::before,
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .countdown[data-ios-clock]::after {
  content: none;
  display: none;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .countdown[data-ios-clock] .ios-clock-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
html[data-pati-web-design=mobile] .ios-clock-rim {
  fill: var(--ios-clock-face);
  stroke: var(--ios-clock-rim);
  stroke-width: 4;
}
html[data-pati-web-design=mobile] .ios-clock-grid {
  fill: none;
  stroke: var(--ios-clock-accent);
  stroke-width: 1;
  opacity: .45;
}
html[data-pati-web-design=mobile] .ios-clock-remaining {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: .72;
}
html[data-pati-web-design=mobile] .ios-clock-hand { fill: currentColor; }
html[data-pati-web-design=mobile] .ios-clock-sweep { opacity: .24; }
html[data-pati-web-design=mobile] .ios-clock-needle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .countdown[data-ios-clock] .ios-clock-number {
  position: relative;
  z-index: 1;
  display: block;
  padding-top: 1px;
  color: inherit;
  font: inherit;
  line-height: 1;
  text-shadow: -1px 0 var(--ios-clock-face),1px 0 var(--ios-clock-face),0 -1px var(--ios-clock-face),0 1px var(--ios-clock-face);
  pointer-events: none;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] .countdown[data-ios-clock].urgent {
  color: var(--ios-clock-danger);
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] .timer-track {
  left: calc(var(--ios-row-clock) + var(--ios-row-gap) + var(--ios-clock-dock-padding));
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category][data-ios-urgent=true] .timer-track i {
  background: var(--ios-clock-danger);
}

/* The vignette occupies no layout space. It is inserted between the painted
 * scene and the controls so the question/input never dim or move. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] > .ios-time-warning {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  background:
    linear-gradient(90deg,rgba(184,35,46,.32),transparent 13%,transparent 87%,rgba(184,35,46,.32)),
    linear-gradient(180deg,rgba(184,35,46,.32),transparent 16%,transparent 84%,rgba(184,35,46,.24));
  box-shadow: inset 0 0 28px rgba(184,35,46,.22);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category][data-ios-urgent=true] > .ios-time-warning {
  visibility: visible;
  animation: pati-ios-time-warning 1.6s ease-in-out infinite;
}
/* The daylight tower needs a stronger edge than the three darker worlds.
 * Keep a visible floor throughout the pulse while the centre stays clear. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=general] > .ios-time-warning {
  --ios-warning-low: .72;
  --ios-warning-high: 1;
  --ios-warning-static: .84;
  background:
    linear-gradient(90deg,rgba(190,30,44,.66),transparent 18%,transparent 82%,rgba(190,30,44,.66)),
    linear-gradient(180deg,rgba(190,30,44,.60),transparent 17%,transparent 83%,rgba(190,30,44,.54));
  box-shadow: inset 0 0 0 2px rgba(190,30,44,.72),inset 0 0 42px rgba(190,30,44,.48);
}
@keyframes pati-ios-time-warning {
  0%,100% { opacity: var(--ios-warning-low,.42); }
  50% { opacity: var(--ios-warning-high,.92); }
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-clock-reduced=true] .ios-clock-hand { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-clock-reduced=true][data-ios-urgent=true] > .ios-time-warning {
  animation: none;
  opacity: var(--ios-warning-static,.66);
}
@media (prefers-reduced-motion:reduce) {
  html[data-pati-web-design=mobile] #review-main .app-viewport .ios-clock-hand { display: none; }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-urgent=true] > .ios-time-warning { animation: none; opacity: var(--ios-warning-static,.66); }
}
@media (forced-colors:active) {
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .countdown[data-ios-clock] {
    forced-color-adjust: none;
    --ios-clock-face: Canvas;
    --ios-clock-rim: CanvasText;
    --ios-clock-accent: CanvasText;
    --ios-clock-danger: Highlight;
  }
  html[data-pati-web-design=mobile] #review-main .app-viewport > .ios-time-warning { display: none; }
}