/* sweetspotgoal.com/send/: sending clips you already have. Built on /brand.css and /landing.css.
   One column on the phone: the blue band at the top, then three numbered steps on white. The one pink thing in a
   step is its main button: «Choose videos» until videos are chosen, then «Send». */

/* the band at the top: the ribbed sky of the guides, a little taller, so the card below can sit over its edge. The sky
   is deep from 140 px down, where the lede starts, so it holds 4.6:1 however tall the ball path makes the band (Band 1,
   2 November: at 60 % the first line of the lede was 3.9:1) */
.send-top { position: relative; isolation: isolate; color: var(--white);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--white) 7%, transparent) 0 1px, transparent 1px 11px, color-mix(in srgb, var(--sky-deep) 12%, transparent) 11px 13px),
    radial-gradient(38% 60% at 88% 70%, color-mix(in srgb, var(--pink) 50%, transparent), transparent 70%),
    linear-gradient(180deg, var(--sky-light) 0, var(--sky) 56px, var(--sky-deep) 140px); }
.send-top-in { display: grid; gap: 14px; max-width: calc(44rem + 32px); padding-block: calc(env(safe-area-inset-top, 0px) + 18px) 64px; }
.send-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.send-top :focus-visible { outline-color: var(--white); }
.send-top h1 { font-size: clamp(2.4rem, 10vw, 4rem); line-height: 0.98; letter-spacing: -0.035em; font-weight: 700; }
.send-top .lede { font-size: 1.125rem; line-height: 1.45; max-width: 32rem; text-shadow: 0 1px 12px color-mix(in srgb, var(--sky-night) 35%, transparent); }
.send-top .as { justify-self: start; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--sky-deep); font-size: 0.9375rem; }
/* the ball path: the ball flies along the dotted line when the band is seen, and again on a tap (anim.js). Without the
   script it stands where it lands */
.pitch { display: block; width: 100%; max-width: 32rem; height: auto; overflow: visible; }
.pitch .guide { fill: none; stroke: color-mix(in srgb, var(--white) 62%, transparent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 9; }
.pitch .trail { fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--k, 1) * 100); }
.pitch .rb { filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--sky-night) 55%, transparent)); }
.pitch .sc { transform-box: fill-box; transform-origin: center; }
.pitch.landed .sc { animation: settle 0.6s var(--spring) both; }
.pitch .b1 { fill: color-mix(in srgb, var(--ink) 30%, transparent); }
/* the small football of the steps, the rows and the progress bar */
.b0 { fill: var(--white); stroke: color-mix(in srgb, var(--ink) 22%, transparent); }
.b1 { fill: color-mix(in srgb, var(--ink) 11%, transparent); }
@keyframes settle { from { scale: 1.4; } }
@keyframes roll { 82%, 100% { transform: rotate(450deg); } }

.send { display: grid; gap: var(--gap); --gap: 44px; --m: 32px; padding-bottom: 64px; max-width: calc(44rem + 32px); }

/* what the clips turn into: the contact point and the shot map from the ads, over the edge of the band */
.reads { position: relative; z-index: 1; margin: -64px 0 0; padding: 18px 16px 14px; gap: 12px; }
/* The ball and the goal stand on one ground line, and the top of the ball is level with the crossbar: the ball is as
   tall as the goal (100 of the goal's 320 units across). The two labels sit on one line under them, two short lines
   each on the phone (Markus, round 4). */
.reads-pics { container-type: inline-size; display: grid; grid-template-columns: 2fr 3fr;
  grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 14px; row-gap: 10px; }
.reads-pic { display: contents; }
.reads-pic img { align-self: end; justify-self: center; width: 58px; height: auto; margin-bottom: 1px; }
.reads-goal { align-self: end; justify-self: center; width: 100%; max-width: 186px; height: auto; overflow: visible; }
@supports (width: 1cqi) {
  .reads-pics { --goal: min(calc((100cqi - 14px) * 0.6), 300px); }
  .reads-pic img { width: calc(var(--goal) * 0.3125); margin-bottom: calc(var(--goal) * 0.006); }
  .reads-goal { width: var(--goal); max-width: none; }
}
.reads-pic span { align-self: start; justify-self: center; max-width: 7.6em; text-align: center; text-wrap: balance;
  font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.reads figcaption { font-size: 0.8125rem; color: var(--ink-2); text-align: center; }

/* the three steps (Step 1, 2 November): numbered circles on one line down the left. The ball rolls down the line to
   the next step, from 1 to 2 when the steps are seen and from 2 to 3 when there are videos to send. A step that is
   done shows a tick */
.step { position: relative; display: grid; gap: 16px; align-content: start; min-width: 0; }
.step h2 { display: flex; align-items: center; gap: 12px; min-height: var(--m); font-size: clamp(1.6rem, 6.5vw, 2.25rem); line-height: 1.05; letter-spacing: -0.03em; }
.step .fineprint a { font-weight: 600; }
.lined { padding-left: calc(var(--m) + 12px); }
.lined .n { position: absolute; z-index: 2; left: 0; top: 0; display: grid; place-items: center; width: var(--m); height: var(--m); border-radius: 50%;
  background: var(--white); color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--line); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.lined .n b { font: inherit; }
.lined .n .ck { display: none; width: 16px; height: 16px; }
.lined .n.ok, .send:has(#send-form:not([hidden])) #pick-h .n { background: var(--sky-deep); color: var(--white); box-shadow: none; }
.lined .n.ok .ck, .send:has(#send-form:not([hidden])) #pick-h .n .ck { display: block; }
.send:has(#send-form:not([hidden])) #pick-h .n b { display: none; }
.rail { position: absolute; left: calc(var(--m) / 2 - 1.5px); top: calc(var(--m) / 2); width: 3px; height: calc(100% + var(--gap)); border-radius: var(--radius-pill); background: var(--line); }
.rail .fl { position: absolute; left: 0; right: 0; top: 0; height: 100%; border-radius: var(--radius-pill); background: var(--sky); }
.rail .rb { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--m) / -2); display: grid; place-items: center; width: var(--m); height: var(--m); margin-left: calc(var(--m) / -2);
  border-radius: 50%; overflow: hidden; background: var(--white); color: var(--ink); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--sky); }
.rail .rb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rail .rb b { position: relative; font: inherit; }
/* from 2 to 3 only once step 3 is there; then the ball on 2 gives way to the tick */
#pick-step .rail { display: none; }
.send:has(#send-form:not([hidden])) #pick-step .rail { display: block; }
.send:has(#send-form:not([hidden])) #ideal-step .rb { display: none; }
#ideal-step.go .fl, #pick-step .fl { animation: rail 1.7s both; }
#ideal-step.go .rb svg, #pick-step .rb svg { animation: roll 1.7s cubic-bezier(0.5, 0.05, 0.3, 1) both; }
#ideal-step.go .rb, #pick-step .rb { animation: land 1.7s both; }
#ideal-step.wait-play .fl { height: 0; }
#ideal-step.wait-play .rb { opacity: 0; }
@keyframes rail { 0% { height: 0; animation-timing-function: cubic-bezier(0.5, 0.05, 0.3, 1); } 82%, 100% { height: 100%; } }
@keyframes land { 0% { opacity: 0; scale: 0.6; } 8% { opacity: 1; scale: 1; } 82% { scale: 1; } 90% { scale: 1.14; } 100% { scale: 1; } }

/* 1 · the ideal video: the still with its tip in frosted glass (Card 5), then the tips with their numbers first
   (Tips 1). The numbers count up when the step is seen */
.ideal { display: grid; gap: 12px; }
.ideal-view { position: relative; height: 252px; margin: 0; overflow: hidden; border-radius: var(--radius-video); background: var(--video-bg); }
.ideal-view img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 86%; }
.ideal-view figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--radius-glass); color: var(--white);
  background: color-mix(in srgb, var(--video-bg) 46%, transparent); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--white) 22%, transparent); }
.ideal-view figcaption b { font-size: var(--text-title); line-height: 1.3; }
.ideal-view figcaption span { font-size: 0.9375rem; line-height: 1.45; color: color-mix(in srgb, var(--white) 90%, transparent); }
.tips { gap: 0; margin: 0; padding: 4px 14px 2px; list-style: none; }
.tips li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; }
.tips li + li { border-top: 1px solid var(--line); }
.tips .val { display: grid; justify-items: center; gap: 4px; color: var(--sky-ink); }
.tips .val svg { width: 30px; height: 30px; }
.tips .num { font-size: 2.125rem; line-height: 0.9; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tips .un { display: inline-flex; align-items: center; min-height: 20px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--fill); color: var(--ink-2);
  font-size: var(--text-label); font-style: normal; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tips .best .num { color: var(--sky-deep); }
.tips .best .un { background: var(--sky-deep); color: var(--white); box-shadow: 0 0 16px -2px color-mix(in srgb, var(--sky-light) 60%, transparent); }
.tips .tx { display: grid; gap: 1px; min-width: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.4; }
.tips .tx b { color: var(--ink); font-size: 1rem; line-height: 1.3; }
.tips .best .tx b { color: var(--sky-ink); }
.tips details { margin-top: 4px; }
/* 44 px to tap, drawn as tall as the line (the margin takes the extra back) */
.tips summary { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: -6px 0; color: var(--sky-ink); font-weight: 600; cursor: pointer; list-style: none; }
.tips summary::-webkit-details-marker { display: none; }
#ideal-step.go .tips li { animation: rise 0.55s var(--spring) both; animation-delay: calc(var(--i) * 0.1s); }
#ideal-step.wait-play .tips li { opacity: 0; }

/* 2 · the videos: a row per video, its frame rate on a line of its own, and while sending a ball rolling along its
   bar (FileRow 1, Badge 1) */
.pick { position: relative; }
.pick .ico { width: 24px; height: 24px; }
#files:focus-visible + .pick { outline: 3px solid var(--pink); outline-offset: 3px; }
.pick.quiet { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
@media (hover: hover) { .pick.quiet:hover { background: var(--sky-tint); } }
.files { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.files:empty { display: none; }
.file { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; gap: 2px 12px; align-items: center;
  padding: 10px 6px 6px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); }
.file.bad { border-color: color-mix(in srgb, var(--error) 35%, transparent); background: var(--error-tint); }
.thumb { position: relative; width: 56px; height: 56px; border-radius: var(--radius-control); overflow: hidden; background: var(--sky-tint); color: var(--sky-ink); display: grid; place-items: center; }
.thumb video { width: 100%; height: 100%; object-fit: cover; }
.thumb .ico { width: 26px; height: 26px; }
.file-main { display: grid; gap: 4px; min-width: 0; }
.file-name { font-weight: 600; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.file-err { color: var(--error); font-size: 0.8125rem; font-weight: 600; line-height: 1.35; }
/* the frame rate shows only the number: 50 fps and up in the deep sky with the bolt, the rest grey. The tips already
   say which is best. Pink stays for the button */
.fps { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; margin: 6px 0 4px; padding: 0 10px; border-radius: var(--radius-pill);
  white-space: nowrap; font-size: var(--text-label); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; background: var(--fill); color: var(--ink-2); }
.fps.best { background: var(--sky-deep); color: var(--white); box-shadow: 0 0 16px -2px color-mix(in srgb, var(--sky-light) 60%, transparent); }
.fps svg { display: inline; width: 13px; height: 13px; flex: none; }
.remove { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.remove:hover { background: var(--fill); }
.file .fbar { position: relative; grid-column: 1 / -1; height: 22px; margin: 0 15px; }
.file .fbar::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: var(--radius-pill); background: var(--sky-tint); }
.file .fbar i { position: absolute; left: 0; top: 50%; height: 6px; width: 0; margin-top: -3px; border-radius: var(--radius-pill); background: var(--sky); transition: width 0.3s ease; }
.file.sent .fbar i { background: var(--sky-deep); }
.fbar .rb, .bar .rb { position: absolute; top: 50%; right: 0; width: 24px; height: 24px; translate: 50% -50%; border-radius: 50%; overflow: hidden; background: var(--white); box-shadow: 0 0 0 2px var(--white), var(--lift); }
.fbar .rb svg, .bar .rb svg { display: block; width: 100%; height: 100%; }
.send:has(#keep:not([hidden])) .file:not(.sent) .rb svg { animation: spin 1.2s linear infinite; }
.file.sent .rb { animation: settle 0.5s var(--spring) both; }
.file .state { font-size: 0.8125rem; font-weight: 600; color: var(--sky-ink); }

/* 3 · send them: a bold line and a grey one, like steps 1 and 2, then the choice */
fieldset.age { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.age legend { display: grid; gap: 2px; padding: 0; margin-bottom: 10px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.4; }
fieldset.age legend b { color: var(--ink); font-size: 1.0625rem; line-height: 1.3; }
/* the white lens slides to the choice with a little spring, and shows only once there is one (Segmented 1) */
.seg { --p: 5px; --g: 4px; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); padding: var(--p); border-radius: var(--radius-pill); background: var(--fill); }
.seg label { position: relative; z-index: 1; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 48px; border-radius: var(--radius-pill); color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; white-space: nowrap; transition: color 0.25s; }
.seg input:checked + span { color: var(--ink); font-weight: 800; }
.seg input:focus-visible + span { outline: 3px solid var(--pink); outline-offset: 1px; }
.seg:has(label:nth-child(2) input:checked) { --i: 1; }
.seg:has(label:nth-child(3) input:checked) { --i: 2; }
.seg .lens { position: absolute; top: var(--p); bottom: var(--p); left: var(--p); width: calc((100% - 2 * var(--p) - 2 * var(--g)) / 3); transform: translateX(calc(var(--i, 0) * (100% + var(--g))));
  border-radius: var(--radius-pill); background: var(--white); pointer-events: none; transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.2s;
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--ink) 35%, transparent); }
.seg:not(:has(input:checked)) .lens { opacity: 0; }
.seg:has(label:active) .lens { scale: 0.96 0.94; }
/* under 16: the card points up at «Under 16» (Notice 2) */
.stop { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px 14px; padding: 18px; border-radius: var(--radius); background: var(--sky-tint); animation: rise 0.4s var(--spring) both; }
.stop::before { content: ''; position: absolute; top: -8px; left: calc(16.667% - 7px); border-style: solid; border-width: 0 8px 8px; border-color: transparent transparent var(--sky-tint); }
.stop .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sky-deep); color: var(--white); }
.stop .ic svg { width: 24px; height: 24px; }
.stop .tx { display: grid; gap: 6px; min-width: 0; }
.stop .tx b { font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.stop .tx span { color: var(--ink-2); line-height: 1.45; }
.stop .btn { grid-column: 1 / -1; margin-top: 6px; }
.rest { display: grid; gap: 18px; }
.consents { display: grid; gap: 8px; }
.consents > .check:first-child .tx { font-weight: 600; }
.parent { display: grid; gap: 10px; margin-top: 6px; padding: 12px 10px 14px; border-radius: var(--radius); background: var(--sky-tint); }
.parent .check .tx { font-weight: 600; }
.field small { font-weight: 400; }
.field .note { font-size: 0.875rem; color: var(--ink-2); padding-inline: 8px; }
.rest .btn-pink { margin-top: 4px; }

/* sending and done: a card over the edge of the band, where the picture card was */
.progress, .done { position: relative; z-index: 1; margin-top: -64px; }
.progress { padding: 20px 18px; border-radius: var(--radius); background: var(--white); border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: var(--lift); }
.progress h2 { justify-content: space-between; }
.progress h2 span { font-variant-numeric: tabular-nums; color: var(--sky-ink); }
/* the ball rolls at the end of the bar while it sends, with a sheen over the bar; both stop when the line drops
   (Progress 1) */
.bar { position: relative; height: 12px; margin: 4px 15px; border-radius: var(--radius-pill); background: var(--sky-tint); }
.bar i { position: relative; display: block; height: 100%; width: 0; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--sky), var(--sky-deep)); transition: width 0.3s ease; }
.bar .sh { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-pill); }
.bar .sh::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--white) 55%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 1.4s var(--ease-out) infinite; }
.bar .rb { width: 30px; height: 30px; }
.progress:has(#keep:not([hidden])) .bar .rb svg { animation: spin 1.2s linear infinite; }
.progress:has(#failed:not([hidden])) .bar .sh::after { animation: none; }
.progress:has(#failed:not([hidden])) .bar .rb { animation: settle 0.6s var(--spring) both; }
.keep { color: var(--ink-2); }
.failed { display: grid; gap: 10px; padding: 18px; background: var(--sky-tint); border-color: transparent; animation: rise 0.55s var(--spring) both; }
.failed span { color: var(--ink-2); }
.done:focus { outline: none; }
/* the receipt: three arcs close into a ring, the tick draws, then the lines rise in (Receipt 3) */
.done-card { justify-items: start; gap: 12px; padding: 24px 20px; }
.done-ico { position: relative; display: grid; place-items: center; width: 76px; height: 76px; color: var(--sky-deep); }
.done-ico .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring .bg { fill: var(--sky-tint); animation: fade 0.4s 0.9s both; }
.ring .tr { fill: none; stroke: var(--sky-tint); stroke-width: 5; }
.ring .arc { fill: none; stroke: var(--sky); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 26 74; animation: arc 0.5s var(--ease-out) both; animation-delay: calc(var(--k) * 0.3s); }
.done-ico .ck { position: relative; width: 30px; height: 30px; animation: pop 0.5s 0.95s var(--spring) both; }
.done-ico .tick { stroke-dasharray: 1; animation: draw 0.4s 1.1s var(--ease-out) both; }
.done-card > [style] { animation: rise 0.5s var(--ease-out) both; animation-delay: calc(0.3s + var(--k) * 0.12s); }
.done-card h2 { font-size: clamp(2rem, 8vw, 2.75rem); letter-spacing: -0.03em; }
.done-n { font-size: 1.125rem; font-weight: 600; }
.done-month { font-size: 1.125rem; font-weight: 700; color: var(--pink-press); }
.done-card p:not(.done-n):not(.done-month) { color: var(--ink-2); }
@keyframes arc { 0% { stroke-dasharray: 0.01 100; opacity: 0; } 2% { opacity: 1; } }
@keyframes draw { from { stroke-dashoffset: 1; } }

/* brand.css stops all motion under reduced motion: the steps, the rows, the bar and the receipt then stand in their
   last frame */

/* the footer keeps the same left edge as the column above */
.footer .wrap { max-width: calc(44rem + 32px); }

@media (min-width: 900px) {
  .send-top-in { padding-bottom: 92px; }
  .progress, .done { margin-top: -80px; }
  .reads { margin-top: -80px; padding: 24px 28px 18px; }
  .reads-pics { column-gap: 32px; }
  .reads-pic img { width: 94px; }
  .reads-goal { max-width: 300px; }
  @supports (width: 1cqi) {
    .reads-pics { --goal: min(calc((100cqi - 32px) * 0.6), 300px); }
    .reads-pic img { width: calc(var(--goal) * 0.3125); }
    .reads-goal { max-width: none; }
  }
  .reads-pic span { max-width: none; }
  .ideal { grid-template-columns: 1.05fr 1fr; column-gap: 22px; }
  /* the still is as tall as the tips beside it: the picture fills the box and does not set its height */
  .ideal-view { height: auto; min-height: 320px; }
  .ideal-view img { position: absolute; inset: 0; }
}