/* The sign-in page: a conversation that keeps going on the left, the way in on the right. */

/* These pages fill the screen under the top bar (70px) and the page doesn't scroll: a form too long for the window scrolls inside its card. */
.connect { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); grid-template-rows: minmax(0, 1fr); gap: clamp(16px, 2.6vw, 34px); width: min(1220px, calc(100% - 28px)); margin: 18px auto; height: calc(100vh - 106px); height: calc(100dvh - 106px); }

.connect.held { visibility: hidden; } /* until connect.js knows this is the right page: someone it sends on never sees it appear and vanish */

/* ---------- the conversation ---------- */
.connect-art { position: relative; isolation: isolate; overflow: hidden; min-height: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; padding: clamp(24px, 3.6vw, 44px) clamp(20px, 3vw, 40px) 0; border-radius: var(--r-l); background: radial-gradient(70% 60% at 85% 5%, rgba(255,0,184,.26), transparent 70%), radial-gradient(60% 55% at 0% 100%, rgba(0,182,255,.16), transparent 70%), var(--lilac); box-shadow: var(--shadow); }
.connect-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 8% 0%, rgba(255,255,255,.6), transparent 62%), radial-gradient(50% 45% at 100% 100%, rgba(255,255,255,.3), transparent 60%); }
.art-title { font-size: clamp(2.8rem, 5.6vw, 5.2rem); line-height: .9; letter-spacing: -0.055em; font-weight: 800; }
.art-title span { display: block; animation: word-up .9s var(--spring) both; }
.art-title span:nth-child(2) { animation-delay: .14s; }
.art-chat { display: grid; align-content: center; gap: .55rem; padding: .6rem 0; min-height: 15rem; }
.ab { margin: 0; display: flex; animation: bubble-up .6s var(--spring) both; }
.ab span { max-width: 78%; padding: .6rem .95rem; border-radius: var(--r-l); background: var(--surface); font-weight: 600; font-size: .98rem; line-height: 1.3; box-shadow: var(--shadow-sm); }
.ab:nth-child(odd) span { border-bottom-left-radius: .35rem; }
.ab:nth-child(even) { justify-content: flex-end; }
.ab:nth-child(even) span { background: var(--yellow); border-bottom-right-radius: .35rem; color: var(--on-accent); }
.a1 { animation-delay: .5s; } .a2 { animation-delay: 1.5s; } .a3 { animation-delay: 2.5s; } .a4 { animation-delay: 3.5s; } .a5 { animation-delay: 4.6s; }
.art-duo { position: relative; display: grid; grid-template-columns: minmax(0, 11rem) minmax(3rem, 1fr) minmax(0, 11rem); align-items: end; justify-content: center; font-size: 14px; }
.art-mid { position: relative; align-self: end; display: grid; place-items: center; min-height: 6rem; }
.art-mid .peek { width: 4rem; height: 4rem; margin-bottom: .6rem; }
.art-mid .hrt { stroke: none; }
.art-mid .hrt.h1 { left: 6%; top: 4%; } .art-mid .hrt.h2 { left: 72%; top: 0; width: 1.4em; } .art-mid .hrt.h3 { left: 42%; top: 40%; width: 1.2em; }
.idle .art-mid .hrt { animation: heart-float 3.4s ease-out infinite; }
.idle .art-mid .h2 { animation-delay: -1.1s; } .idle .art-mid .h3 { animation-delay: -2.2s; }
.hrt { position: absolute; width: 1.7em; height: 1.7em; fill: var(--brand); }
.connect-art .spk { position: absolute; opacity: .9; }
.s1 { top: 14%; right: 12%; width: 1.7rem; color: #fff; } .s2 { top: 36%; left: 6%; width: 1.1rem; color: var(--ink); } .s3 { top: 60%; right: 6%; width: 1.4rem; color: var(--orange); }
.idle .spk { animation: twinkle 3.4s ease-in-out infinite; } .idle .s2 { animation-delay: -1.2s; } .idle .s3 { animation-delay: -2.3s; }
@keyframes bubble-up { from { opacity: 0; transform: translateY(1.2rem) scale(.9); } }
@keyframes word-up { from { opacity: 0; transform: translateY(.6em) rotate(4deg) scale(.92); } }
@keyframes heart-float { 0% { opacity: 0; translate: 0 1.4em; scale: .5; } 20% { opacity: 1; } 100% { opacity: 0; translate: 0 -3em; scale: 1.1; rotate: 14deg; } }

/* ---------- the way in ---------- */
.connect-card { align-self: center; max-height: 100%; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-l); background: var(--paper-2); box-shadow: var(--shadow); }
.connect-card h1 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); letter-spacing: -0.05em; line-height: 1; margin: 0 0 22px; }
.connect-card > [id^="step-"]:not([hidden]) { animation: step-in .5s var(--glide) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(26px); } }
.choices { display: grid; gap: 14px; }
.choice { position: relative; overflow: hidden; display: block; width: 100%; text-align: left; border: 0; border-radius: var(--r-l); padding: 20px 56px 20px 22px; cursor: pointer; text-decoration: none; color: inherit; font: inherit; box-shadow: var(--shadow-sm); transition: transform .4s var(--spring), box-shadow .3s; }
.choice::after { content: "→"; position: absolute; right: 22px; top: 50%; translate: 0 -50%; font-size: 1.6rem; font-weight: 700; transition: transform .4s var(--spring); }
.choice:hover:not(.disabled) { transform: translateY(-3px) scale(1.015); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 26px 36px -22px rgb(var(--sh-rgb) / calc(0.77 * var(--sh-k))); }
.choice:hover:not(.disabled)::after { transform: translateX(5px); }
.choice:active:not(.disabled) { transform: scale(.975); }
.choice.disabled { opacity: .5; cursor: not-allowed; }
.choice-title { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.04em; }
.choice small { display: block; margin-top: 6px; font-size: .9rem; line-height: 1.4; font-weight: 500; opacity: .92; }
.choice-ig { background: var(--ig); color: #fff; }
.choice-private { background: var(--yellow); color: var(--on-accent); }
/* the details form (welcome.html): a select and short helper lines to go with the page's text fields */
.field select { width: 100%; border: 0; border-radius: var(--r-m); padding: 14px 16px; background: var(--surface); font: inherit; font-weight: 500; font-size: 16px; box-shadow: 0 0 0 1.5px rgba(var(--fg-rgb),.13) inset; transition: box-shadow .25s; cursor: pointer; }
.field select:focus { outline: none; box-shadow: 0 0 0 2.5px var(--edge) inset, 0 0 0 7px rgba(201,139,255,.35); }
.field input:disabled { background: rgba(255,255,255,.6); color: rgba(var(--fg-rgb),.6); cursor: not-allowed; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.at-input { position: relative; display: block; }
.at-input .at { position: absolute; left: 16px; top: 50%; translate: 0 -50%; font-weight: 700; opacity: .5; pointer-events: none; }
.at-input input { padding-left: 34px; }
.hint { font-weight: 500; font-size: .8rem; line-height: 1.4; color: var(--muted); }
.hint.ok { color: var(--blue); font-weight: 700; }
.hint.bad { color: var(--pink-text); font-weight: 700; }
.opt { font-weight: 500; opacity: .6; }
#welcome-form .btn { margin-top: 6px; }

/* the way in to Instagram: its own card, with the Instagram mark, before the choice of Creator or private account */
.ig-start { text-align: center; }
.ig-tile { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 18px; border-radius: var(--r-l); background: var(--ig); color: #fff; box-shadow: 0 18px 30px -16px rgba(255,0,184,.7); animation: ig-bob 3.4s ease-in-out infinite; }
.ig-tile svg { width: 46px; height: 46px; }
@keyframes ig-bob { 50% { transform: translateY(-5px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .ig-tile { animation: none; } }
:root[data-motion="reduced"] .ig-tile { animation: none; }
.ig-start .lede { max-width: 26rem; margin: 0 auto 22px; }
.ig-go { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
.ig-go .ig-glyph { width: 1.35rem; height: 1.35rem; }
.ig-start .fine { margin-top: 14px; }

/* Google's own sign-in button, to Google's branding guidelines (light theme, rectangular): 40px high, a 1px #747775 outline, the
   four-colour G at 20px, Roboto Medium 14px in #1F1F1F, 12px of padding and 10px between the G and the words. Don't restyle it. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/roboto-latin-500-normal.woff2") format("woff2"); }
.gsi-wrap { display: flex; justify-content: center; margin: 4px 0 0; }
.gsi { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: min(100%, 400px); height: 40px; padding: 0 12px; border: 1px solid #8e918f; border-radius: 4px; background: #131314; color: #e3e3e3; font: 500 14px/20px "Roboto", system-ui, sans-serif; letter-spacing: .25px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.gsi-icon { display: block; width: 20px; height: 20px; flex: none; }
.gsi:hover:not([aria-disabled="true"]) { background-image: linear-gradient(rgba(227,227,227,.08), rgba(227,227,227,.08)); box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.gsi:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.gsi:active:not([aria-disabled="true"]) { background-image: linear-gradient(rgba(0,0,0,0.17), rgba(0,0,0,0.17)); }
.gsi[aria-disabled="true"] { background: rgba(255,255,255,.38); border-color: rgba(31,31,31,.12); color: rgba(31,31,31,.38); cursor: not-allowed; }
.gsi[aria-disabled="true"] .gsi-icon { opacity: .38; }
.gsi.connecting { pointer-events: none; }
/* Sign in with Apple, as Apple's guidelines draw it: black, the white Apple logo, the same size as the Google button beside it */
.gsi-wrap + .gsi-wrap { margin-top: 10px; }
.asi { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: min(100%, 400px); height: 40px; padding: 0 12px; border: 1px solid #fff; border-radius: 4px; background: #fff; color: #000; font: 500 14px/20px -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s; }
.asi-icon { display: block; width: 18px; height: 18px; flex: none; margin-top: -2px; filter: invert(1); } /* the white logo, black on Apple's white button */
.asi:hover:not([aria-disabled="true"]) { background: #ebebeb; }
.asi:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.asi[aria-disabled="true"] { opacity: .38; cursor: not-allowed; }
.asi.connecting { pointer-events: none; }
.gsi-note { text-align: center; margin-top: 14px; }
.choice.connecting { pointer-events: none; }
.choice.connecting .ig-spinner { display: inline-block; }

/* the loading screen: Peek hops about while Instagram thinks it over, and the bar fills when it's done */
.working-peek { width: 74px; height: 74px; margin-bottom: 14px; transform-origin: 50% 100%; animation: peek-bob 1.4s ease-in-out infinite; }
.working-status { margin: 0 0 12px; font-weight: 700; font-size: 1.05rem; min-height: 1.4em; }
.elapsed { opacity: .65; white-space: nowrap; }
#step-working.done .progress span { inset: 0; width: 100%; background: linear-gradient(90deg, var(--brand), var(--yellow)); animation: none; }
#step-working.done .working-peek { animation: cheer .7s var(--spring) infinite alternate; }
@keyframes cheer { to { transform: translateY(-14px) rotate(8deg) scale(1.08); } }

@media (max-height: 760px) { /* a short window: the two of them step aside so the words aren't cut off */
  .art-duo { display: none; }
  .art-chat { min-height: 0; align-content: start; }
}
@media (max-width: 900px) {
  .connect { grid-template-columns: minmax(0, 1fr); margin: 12px auto; height: calc(100vh - 94px); height: calc(100dvh - 94px - env(safe-area-inset-bottom)); }
  .connect-art { display: none; }
  .connect-card { align-self: start; }
}

/* ---------- the box that says "I agree" ---------- */
.agree { display: flex; align-items: center; gap: .85rem; margin: 0 0 1rem; padding: 1rem 1.15rem; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 0 0 2px rgba(var(--fg-rgb),.14) inset; font-weight: 600; line-height: 1.35; cursor: pointer; transition: box-shadow .3s, background .3s; }
.agree a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.agree input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 1.7rem; height: 1.7rem; margin: 0; border: 2.5px solid var(--edge); border-radius: .55rem; background: var(--surface); cursor: pointer; transition: background .2s, scale .3s var(--spring); }
.agree input::after { content: ""; position: absolute; left: .45rem; top: .1rem; width: .5rem; height: .9rem; border: solid var(--on-accent); border-width: 0 .25rem .25rem 0; rotate: 45deg; opacity: 0; scale: .4; transition: opacity .15s, scale .3s var(--spring); }
.agree input:checked { background: var(--yellow); color: var(--on-accent); }
.agree input:checked::after { opacity: 1; scale: 1; }
.agree input:active { scale: .88; }
.agree.ticked { background: rgba(255,255,0,.07); box-shadow: 0 0 0 2px var(--yellow) inset; }
.agree.shake { animation: shake .5s; box-shadow: 0 0 0 2.5px var(--brand) inset; }
@keyframes shake { 20%, 60% { translate: -.4rem 0; } 40%, 80% { translate: .4rem 0; } }
#step-choose:not(.agreed) .choice { opacity: .5; cursor: not-allowed; }
#step-choose:not(.agreed) .choice:hover { transform: none; box-shadow: var(--shadow-sm); }
#step-choose:not(.agreed) .choice:hover::after { transform: none; }
#step-choose.agreed .choice:not(.disabled) { animation: unlock .45s var(--spring); }
@keyframes unlock { from { scale: .97; } }