/* sweetspotgoal.com/app/: built on brand.css, landing.css and the band and progress bar of /send/send.css. */
.app-top .send-top-in { padding-bottom: 56px; }
.app { --gap: 20px; padding-top: 0; }
.app > .app-step, .app > .busy { margin-top: -40px; position: relative; z-index: 1; }
.busy { color: var(--white); text-align: center; }
.app-step { display: grid; gap: 16px; }
.app-step h2 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.05; letter-spacing: -0.03em; }
#home h2 { margin-top: 18px; }
#signin form, #consent form { display: grid; gap: 12px; }
.check a { font-weight: 700; color: var(--sky-ink); }
.check .tx b { display: block; }
.hint, .foot, .empty, .keep, .conf { font-size: 0.9375rem; color: var(--ink-2); }
#home .hint { padding-inline: 8px; }
#home > .btn-pink { min-height: 64px; }
.sent { padding: 12px 14px; border-radius: var(--radius-control); background: var(--sky-tint); font-weight: 600; }
.link { background: none; border: 0; padding: 8px 0; font: 600 0.9375rem var(--font); color: var(--sky-ink); cursor: pointer; justify-self: start; }
.link.danger { color: var(--error); justify-self: center; }
.back { color: var(--white); margin-bottom: -6px; }

/* the library */
.lib { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lib-row { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; border: 0; border-radius: var(--radius-control);
  background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  transition: transform 0.45s var(--spring); }
.lib-row:active { transform: scale(0.98); transition-duration: 0.1s; }
.lib-tx { flex: 1; display: grid; gap: 2px; }
.lib-tx small { color: var(--ink-2); font-size: 0.8125rem; }
.lib-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--pending); }
.lib-dot.complete, .lib-dot.partial { background: var(--sky); }
.lib-dot.queued, .lib-dot.running { background: var(--pink); animation: breathe 2.4s ease-in-out infinite; }
.lib-dot.failed { background: var(--error); }

/* one analysis */
.clip { width: 100%; max-height: 70vh; border-radius: var(--radius-video); background: var(--video-bg); }
.res { gap: 10px; }
.ai { justify-self: start; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--sky-tint); color: var(--sky-ink);
  font-size: var(--text-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.zones { width: 100%; max-width: 320px; height: auto; justify-self: center; overflow: visible; }
.zones .fr { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.zones .th { stroke: var(--line); stroke-width: 1.5; }
.zones .gr { stroke: var(--line); stroke-width: 2; }
.zones .hit { fill: var(--pink); animation: pop 0.7s var(--spring) both; }
.zone-tx { text-align: center; font-weight: 700; }
.reads-list { display: grid; gap: 4px; margin: 6px 0 0; }
.reads-list dt { font-size: var(--text-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-top: 8px; }
.reads-list dd { margin: 0; line-height: 1.5; }
.frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.frames:empty { display: none; }
.frames figure { margin: 0; display: grid; gap: 4px; }
.frames img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-control); background: var(--video-bg); }
.frames figcaption { font-size: 0.8125rem; text-align: center; color: var(--ink-2); }
.report summary { cursor: pointer; font-weight: 700; }
.report form { display: grid; gap: 12px; margin-top: 12px; }
textarea.input { padding: 12px 16px; min-height: 90px; resize: vertical; }
.settings { gap: 12px; }
.settings summary, .report summary { cursor: pointer; font-weight: 700; }
.settings[open] { display: grid; }
.c-points { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; line-height: 1.45; }
.c-links a, .foot a { color: var(--sky-ink); font-weight: 600; }
.c-acts { display: grid; gap: 10px; }
#age-form, #age-stop { display: grid; gap: 12px; }
.sent-box, #code-form { display: grid; gap: 12px; }
.phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.phases li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.phases li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--pending); }
.phases li.done::before { background: var(--sky); box-shadow: none; }
.phases li.now { color: var(--ink); font-weight: 700; }
.phases li.now::before { background: var(--pink); box-shadow: none; animation: breathe 2.4s ease-in-out infinite; }