/* not3 — Not 3 (SART), also Long Watch. One digit at a time in the top area, one large pad in the bottom 45%.
   Heights follow the screen (dvh) so the pad stays fully on screen on an iPhone SE (375×667) and smaller. */
.not3-stim { flex-direction: column; min-height: clamp(120px, 26dvh, 200px); }
.not3-field { flex: 1; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; }
.not3-digit { font-weight: 200; line-height: 1; color: var(--stage-ink); letter-spacing: -1px; user-select: none; -webkit-user-select: none; }
.not3-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--stage-faint); }
.not3-digit[hidden], .not3-dot[hidden] { display: none; }
.not3-field.slip { opacity: 0.4; }
.not3-caption { margin: 0 0 4px; min-height: 1.4em; font-size: 13px; color: #6A665F; text-align: center; }

.not3-pad { width: 100%; height: clamp(150px, 40dvh, 340px); position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; }
.not3-pad svg { display: block; color: var(--stage-faint); }
/* a thin water ring where the thumb lands, a fainter second one just behind; lines stay 1 px as they grow */
.not3-ripple { position: absolute; width: 0; height: 0; pointer-events: none; }
.not3-ripple::before, .not3-ripple::after {
  content: ''; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 1px solid var(--stage-dim); opacity: 0;
  animation: not3-ripple 0.75s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}
.not3-ripple::after { animation-delay: 0.14s; border-color: var(--stage-faint); }
@keyframes not3-ripple { from { width: 12px; height: 12px; opacity: 0.85; } to { width: 260px; height: 260px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .not3-ripple { display: none; } }

/* the check-in (SART): digits in 5 sizes up to min(120px, 17dvh); between digits a ⊗ mask the size of the largest
   digit's figure (digits stand ~0.72 em tall) */
.not3-field.sart { min-height: min(124px, 18dvh); }
.not3-mask { width: calc(min(120px, 17dvh) * 0.74); height: calc(min(120px, 17dvh) * 0.74); color: var(--stage-ink); }
.not3-mask svg { display: block; width: 100%; height: 100%; }
.not3-mask[hidden] { display: none; }

/* the optional question after it: three answers in the thumb area, a 1 px line that runs out while it waits */
.not3-ask { width: 100%; text-align: center; padding: 0 8px; }
.not3-ask-q { margin: 0; font-size: 22px; font-weight: 300; line-height: 1.35; color: var(--stage-ink); }
.not3-ask-note { margin: 10px 0 0; font-size: 13px; color: var(--stage-dim); }
.not3-drifts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; height: clamp(72px, 14dvh, 104px); }
.not3-drift { min-height: 44px; padding: 0 6px; font-size: 15px; color: var(--stage-ink); text-align: center; line-height: 1.2; }
.not3-drift.on { background: var(--stage-ink); color: var(--stage); border-color: var(--stage-ink); }
.not3-ask-line { height: 1px; margin-top: 18px; background: var(--stage-line); overflow: hidden; }
.not3-ask-line i { display: block; height: 100%; width: 100%; background: var(--stage-dim); transform-origin: left center; animation: not3-ask-run linear forwards; }
@keyframes not3-ask-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .not3-ask-line { display: none; } }