/* Check my stop (js/checkstop.js): the trip screen's chip, and the full-screen sheet that reads the sign. Everything
   that moves is transform or opacity (plus the tick drawing itself, a stroke); reduced motion keeps only fades. */
.check-chip { box-shadow: none; background: var(--surface-2); min-height: 40px; font-size: var(--fs-sub); margin: -6px 8px 12px 0; color: var(--text); }
.check-chip .i { color: var(--accent); }
.verified-ok { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; font-size: var(--fs-sub); font-weight: 600; color: var(--ok); }
.verified-ok .i { flex: none; }

.cs { position: fixed; inset: 0; z-index: 80; background: var(--bg); color: var(--text); display: flex; flex-direction: column; align-items: center; padding: calc(var(--safe-top) + 8px) 16px calc(var(--safe-bot) + 16px); overflow-y: auto; animation: cs-in .22s var(--ease) both; }
.cs.closing { animation: cs-out .2s var(--ease) both; }
@keyframes cs-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes cs-out { to { opacity: 0; transform: translateY(12px); } }
.cs-top { width: 100%; max-width: 420px; display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.cs-kicker { outline: none; font-size: var(--fs-foot); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cs-x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text); }

/* the photo, in a rounded frame; the viewfinder inside it with the rest darkened */
.cs-frame { position: relative; flex: none; width: min(100%, 360px, 45vh); aspect-ratio: 3 / 4; margin-top: 6px; border-radius: 26px; overflow: hidden; background: #0c0a09; box-shadow: var(--shadow); }
.cs-frame.wide { aspect-ratio: 4 / 3; width: min(100%, 380px); }
.cs-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-vf { position: absolute; inset: 13% 11%; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 999px rgba(8, 6, 5, .62); }
.cs-frame.wide .cs-vf { inset: 12% 18%; }
/* the corner brackets: white while it reads, then the answer's colour fades over them as they snap in */
.cs-c { position: absolute; width: 30px; height: 30px; --dx: -1; --dy: -1; animation: cs-breathe 1.6s ease-in-out infinite; transition: translate .38s var(--spring); }
.cs-c::before, .cs-c::after { content: ""; position: absolute; inset: 0; border: 0 solid #fff; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 14px; transition: opacity .25s; }
.cs-c::after { border-color: var(--k, #fff); opacity: 0; }
.cs-c.tl { top: 8px; left: 8px; }
.cs-c.tr { top: 8px; right: 8px; --dx: 1; --dy: -1; transform: rotate(90deg); }
.cs-c.br { bottom: 8px; right: 8px; --dx: 1; --dy: 1; transform: rotate(180deg); }
.cs-c.bl { bottom: 8px; left: 8px; --dx: -1; --dy: 1; transform: rotate(270deg); }
@keyframes cs-breathe { 50% { translate: calc(var(--dx) * 4px) calc(var(--dy) * 4px); } }
.cs:not([data-state="scan"]) .cs-c { animation: none; translate: calc(var(--dx) * -7px) calc(var(--dy) * -7px); }
.cs:not([data-state="scan"]) .cs-c::after { opacity: 1; }
.cs:not([data-state="scan"]) .cs-c::before { opacity: 0; }
.cs[data-state="ok"] { --k: var(--ok); } .cs[data-state="wrong"] { --k: var(--warn); } .cs[data-state="fail"] { --k: #b9b1ac; } .cs[data-state="twin"] { --k: #8fa3b8; }
/* the scan line: a bright line with a soft glow trailing above it, top to bottom, over and over while it reads */
.cs-sweep { position: absolute; inset: 0; transform: translateY(-100%); background: linear-gradient(to bottom, transparent 55%, rgba(255, 178, 30, .10) 80%, rgba(255, 178, 30, .34)); animation: cs-sweep 1.7s cubic-bezier(.45, 0, .55, 1) infinite; will-change: transform; }
.cs-sweep::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -1px; height: 3px; border-radius: 3px; background: #fff; box-shadow: 0 0 10px 2px rgba(255, 210, 120, .9), 0 0 26px 6px rgba(255, 178, 30, .45); }
@keyframes cs-sweep { 0% { transform: translateY(-100%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
.cs:not([data-state="scan"]) .cs-sweep { animation: none; opacity: 0; transition: opacity .2s; }
/* the photo dims a little more under the answer's badge */
.cs-photo { transition: opacity .3s; } .cs:not([data-state="scan"]) .cs-photo { opacity: .72; }

/* the answer's badge, over the viewfinder */
.cs-badge { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 21%; pointer-events: none; }   /* low in the frame, clear of the sign's number */
.cs-tick { width: 104px; height: 104px; animation: cs-pop .42s var(--spring) both; }
@keyframes cs-pop { from { transform: scale(.6); opacity: 0; } }
.cs-disc { fill: var(--k); opacity: .96; }
.cs-ring { fill: none; stroke: #fff; stroke-width: 5; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 48px 48px; stroke-linecap: round; opacity: .55; animation: cs-draw .5s .08s var(--ease) forwards; }
.cs-check { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: cs-draw .34s .38s var(--ease) forwards; }
@keyframes cs-draw { to { stroke-dashoffset: 0; } }
.cs[data-state="fail"] .cs-disc { fill: #8f8783; }
/* twin poles: the sign was read, but there's one each side of the road (a calm slate disc, two poles and a centre line) */
.cs[data-state="twin"] .cs-disc { fill: #3f4a57; }
.cs-road { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .5; } .cs-pole { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; } .cs-flag { fill: var(--sun); }
.cs-q { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; } .cs-qdot { fill: #fff; }
/* wrong stop: one gentle shake of the frame, and an arrow to your pole */
.cs[data-state="wrong"] .cs-frame { animation: cs-shake .5s .05s ease-in-out both; }
@keyframes cs-shake { 15% { transform: translateX(-9px); } 35% { transform: translateX(8px); } 55% { transform: translateX(-5px); } 75% { transform: translateX(3px); } }
.cs-dir { position: relative; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: var(--warn); box-shadow: 0 0 0 6px rgba(255, 255, 255, .22); animation: cs-pop .42s .1s var(--spring) both; }
.cs-n { position: absolute; top: 7px; left: 0; right: 0; text-align: center; font-size: var(--fs-cap); font-weight: 800; letter-spacing: .06em; color: #fff; opacity: .9; transition: opacity .2s; }
.cs-dir.live .cs-n { opacity: 0; }
.cs-arrow { width: 62px; height: 62px; display: grid; place-items: center; transition: transform .15s linear; will-change: transform; }
.cs-nudge { display: grid; place-items: center; animation: cs-nudge 1.1s ease-in-out infinite; }
.cs-arrow svg { width: 56px; height: 56px; fill: #fff; }
@keyframes cs-nudge { 50% { transform: translateY(-6px); } }

.cs-status { margin: 16px 0 0; min-height: 22px; font-size: var(--fs-body); font-weight: 600; color: var(--muted); text-align: center; }
.cs:not([data-state="scan"]) .cs-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }   /* the result says it now */
.cs-out { width: 100%; max-width: 420px; margin-top: 14px; text-align: center; }
.cs-out:empty { display: none; }
.cs-out > * { animation: cs-rise .32s .12s var(--ease) both; }
@keyframes cs-rise { from { opacity: 0; transform: translateY(10px); } }
.cs-title { font-size: var(--fs-title2); line-height: 1.2; outline: none; }
.cs-title.ok { color: var(--ok); } .cs-title.wrong { color: var(--warn); }
.cs-text { margin: 8px 0 16px; font-size: var(--fs-body); line-height: 1.45; color: var(--text); }
.cs-text b { font-weight: 800; }
.cs-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .cs, .cs.closing, .cs-tick, .cs-dir, .cs-out > * { animation-name: cs-fade; }
  .cs.closing { animation-name: cs-fadeout; }
  .cs-c, .cs[data-state="wrong"] .cs-frame, .cs-nudge { animation: none; transition: none; }
  .cs:not([data-state="scan"]) .cs-c { translate: none; }
  .cs[data-state="scan"] .cs-c { animation: cs-blink 1.6s ease-in-out infinite; }
  .cs-sweep { animation: none; opacity: 0; }
  .cs-ring, .cs-check { animation: none; stroke-dashoffset: 0; }
  .cs-arrow { transition: none; }
}
@keyframes cs-fade { from { opacity: 0; } }
@keyframes cs-blink { 50% { opacity: .35; } }
@keyframes cs-fadeout { to { opacity: 0; } }

/* the how-to before the camera, the first few times */
.cs-coach { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; text-align: center; margin: auto 0; padding: 8px 4px 0; }
.cs-coach h2 { margin: 18px 0 8px; font-size: var(--fs-title); font-weight: 800; letter-spacing: -.02em; outline: none; }
.cs-coach p { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--muted); } .cs-coach p b { color: var(--text); }
.cs-coach ul { margin: 18px 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; text-align: left; width: 100%; }
.cs-coach li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sub); font-weight: 600; }
.cs-coach li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.cs-pole-art { width: 120px; height: 170px; }
.cs-pole-art .pole { fill: var(--surface-2); }
.cs-pole-art .panel { fill: var(--text); opacity: .9; }
.cs-pole-art .lines { stroke: var(--bg); stroke-width: 4; stroke-linecap: round; }
.cs-pole-art .frame { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: none; }
.cs-pole-art .corner { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) { .cs-pole-art .frame, .cs-pole-art .corner { animation: cs-aim 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } }
@keyframes cs-aim { 50% { transform: scale(1.06); } }
.fs-check-hint { margin: 10px 0 0; font-size: var(--fs-sub); font-weight: 600; text-align: center; color: var(--muted); }