/* /signup: the form on a sheet at the left, a wall of collage plates at the
   right, the composition the operator sign-in uses (desk/signin.css), on the
   marketing tokens (paste/tokens.css). Colour blocks, never a divider.
   Fields are outlined with a clear line in both themes, every field is 16px or
   more (under that iOS zooms on focus), and nothing here is a browser default. */

.su { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); min-height: 100vh; min-height: 100dvh; }

/* ── The sheet ── */
.su-left { display: flex; flex-direction: column; min-width: 0; padding: 24px clamp(20px, 4vw, 64px); background: var(--sheet); }
.su-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.su-formwrap { width: 100%; max-width: 480px; margin: auto; padding: 36px 0 28px; }
.su-title { margin-top: 14px; font-weight: 800; font-size: clamp(40px, 4.3vw, 62px); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.su-title .sq .ink { bottom: -.06em; height: .2em; --sw: 2.4; }
.su-lede { margin-top: 14px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--ink2); text-wrap: pretty; }

.su-form { display: grid; gap: 16px; margin-top: 26px; }
.su-field { display: grid; gap: 7px; min-width: 0; }
.su-field > label { font-weight: 700; font-size: 15.5px; color: var(--ink2); }

/* The field: a clear line, never a filled box. Ink on paper, cream in the
   dark room; focus is the full line with the green halo; trouble is the
   danger line; a good answer adds a small green tick at the end. */
.su-box { --fl: color-mix(in srgb, var(--ink) 42%, transparent); position: relative; display: flex; align-items: center; min-height: 54px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--fl); transition: box-shadow 160ms ease; }
@media (hover: hover) { .su-box:hover { --fl: color-mix(in srgb, var(--ink) 70%, transparent); } }
.su-box:focus-within { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent); }
.su-field.is-bad .su-box { box-shadow: inset 0 0 0 2px var(--danger); }
.su-field.is-bad .su-box:focus-within { box-shadow: inset 0 0 0 2px var(--danger), 0 0 0 4px color-mix(in srgb, var(--danger) 24%, transparent); }
.su-input { flex: 1; min-width: 0; width: 100%; height: 54px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font-weight: 600; font-size: 17px; outline: none; -webkit-appearance: none; appearance: none; }
.su-input::placeholder { color: var(--ink3); opacity: .8; font-weight: 500; }
.su-input:-webkit-autofill, .su-input:-webkit-autofill:hover, .su-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: inset 0 0 0 100px var(--sheet); caret-color: var(--ink); transition: background-color 9999s; }
.su-box--at .su-input { padding-left: 4px; }
.su-at { padding-left: 16px; color: var(--ink3); font-weight: 700; font-size: 17px; }
.su-box--pw .su-input { padding-right: 56px; }

/* The state at the end of a field: a spinner while it asks, a tick, a cross. */
.su-state { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-right: 14px; opacity: 0; transform: scale(.6); transition: opacity 160ms ease, transform 240ms var(--ease-spring); }
.su-field.is-checking .su-state, .su-field.is-good .su-state, .su-field.is-bad .su-state { opacity: 1; transform: none; }
.su-field.is-checking .su-state { border: 2px solid var(--ink3); border-right-color: transparent; border-radius: 50%; width: 18px; height: 18px; margin-right: 16px; animation: su-spin 700ms linear infinite; }
.su-field.is-good .su-state { background: var(--green-ink); -webkit-mask: var(--m-check) center / 20px no-repeat; mask: var(--m-check) center / 20px no-repeat; }
.su-field.is-bad .su-state { background: var(--danger); -webkit-mask: var(--m-x) center / 18px no-repeat; mask: var(--m-x) center / 18px no-repeat; }
.su { --m-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); --m-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
@keyframes su-spin { to { transform: rotate(360deg); } }

.su-eye { position: absolute; right: 7px; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 99px; color: var(--ink3); transform: translateY(-50%); transition: color 160ms ease, background-color 160ms ease; }
.su-eye svg { width: 20px; height: 20px; }
.su-eye[aria-pressed="true"] { color: var(--ink); }
.su-eye[aria-pressed="true"]::after { content: ''; position: absolute; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(-40deg); box-shadow: 0 0 0 2px var(--sheet); }
@media (hover: hover) { .su-eye:hover { color: var(--ink); background: var(--well); } }

/* What the field has to say: quiet when neutral, green when good, the danger
   colour when not. Empty takes no room. */
.su-hint { min-height: 0; color: var(--ink3); font-size: 15px; font-weight: 600; line-height: 1.45; }
.su-hint:empty { display: none; }
.su-field.is-good .su-hint { color: var(--green-ink); }
.su-field.is-bad .su-hint { color: var(--danger); }
.su-hint .su-sugg { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 2px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1.4px var(--rule2); color: var(--ink); font-weight: 700; font-size: 14.5px; }
@media (hover: hover) { .su-hint .su-sugg:hover { box-shadow: inset 0 0 0 1.4px var(--ink); } }

/* "You already have an account": what to do next, in the field's own place. */
.su-taken { display: grid; gap: 10px; margin-top: 4px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--mustard) 26%, var(--sheet)); color: var(--ink); font-weight: 600; }
.su-taken b { font-weight: 800; }
.su-taken p { color: var(--ink2); font-size: 15px; font-weight: 550; }
.su-taken .su-taken-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.su-taken .btn { --bh: 40px; padding: 0 16px; font-size: 14.5px; }
.su-taken .su-reset-note { color: var(--ink); font-size: 14.5px; font-weight: 650; }
.su-field.is-taken .su-hint { color: var(--ink); }

/* The meter: four segments, filled left to right, coloured by the score. */
.su-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; height: 6px; margin-top: 4px; }
.su-meter i { border-radius: 4px; background: color-mix(in srgb, var(--ink) 14%, transparent); transform-origin: left; overflow: hidden; position: relative; }
.su-meter i::after { content: ''; position: absolute; inset: 0; background: var(--mc, transparent); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease-out), background-color 200ms ease; }
.su-meter[data-score="1"] { --mc: var(--s-sold); } .su-meter[data-score="2"] { --mc: var(--s-busy); } .su-meter[data-score="3"], .su-meter[data-score="4"] { --mc: var(--green); }
.su-meter[data-score="1"] i:nth-child(-n+1)::after, .su-meter[data-score="2"] i:nth-child(-n+2)::after, .su-meter[data-score="3"] i:nth-child(-n+3)::after, .su-meter[data-score="4"] i::after { transform: none; }
.su-meter-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.su-meter-row .su-meter-label { margin-left: auto; flex: none; padding-top: 1px; }
.su-meter-label { color: var(--ink3); font-size: 13.5px; font-weight: 700; }
.su-meter-label:empty { display: none; }

.su-consent { color: var(--ink3); font-size: 14.5px; line-height: 1.55; }
.su-consent a, .su-else a, .su-legal a { color: var(--ink); font-weight: 700; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 1px; }

/* What went wrong with the whole form: a block of the danger tint. */
.su-notice:empty { display: none; }
.su-notice:not(:empty) { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: 12px; background: color-mix(in srgb, var(--s-sold) 14%, var(--sheet)); color: var(--ink); font-weight: 650; font-size: 15px; line-height: 1.45; }
.su-notice:not(:empty)::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 1px; background: var(--danger); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 17h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.6v.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 17h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.6v.2'/%3E%3C/svg%3E") center / contain no-repeat; }

/* The big ink pill, the green dot on it, a spinner while it works. */
.su-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; padding: 0 28px; border-radius: 999px; background: var(--ink); color: var(--ground); font-weight: 750; font-size: 16.5px; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 12px 24px -14px rgba(0,0,0,.6); transition: background-color 160ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out); }
.su-go::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(63,217,143,.24); }
@media (hover: hover) { .su-go:hover { background: color-mix(in srgb, var(--ink) 88%, var(--ground)); transform: translateY(-1px); } }
.su-go:active { transform: scale(.98); }
.su-go:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.su-go[aria-busy="true"] { pointer-events: none; background: color-mix(in srgb, var(--ink) 80%, var(--ground)); }
.su-go[aria-busy="true"]::before { width: 15px; height: 15px; background: none; box-shadow: none; border: 2px solid currentColor; border-right-color: transparent; animation: su-spin 700ms linear infinite; }

.su-else { display: grid; gap: 8px; margin-top: 26px; color: var(--ink3); font-size: 15px; line-height: 1.55; }
.su-else b { color: var(--ink); font-weight: 750; }
.su-legal { color: var(--ink3); font-size: 13px; }
.su-legal a { color: var(--ink3); font-weight: 600; background: none; }

/* ── The wall ── */
.su-right { position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; min-width: 0; padding: clamp(16px, 2.6vw, 44px); background: var(--ground); overflow: hidden; }
.su-wall { --wg: clamp(10px, 1vw, 16px); position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: var(--wg); width: min(100%, calc(100dvh - 230px)); min-width: min(100%, 520px); aspect-ratio: 1; }
.su-tile { position: relative; border-radius: 6px; }
.su-tile > .art { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; box-shadow: var(--shadow); }
.su-tile .cap { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 3px 7px; border-radius: 4px; background: rgba(251,248,241,.9); color: #1D1F22; font-size: 12px; font-weight: 700; }
.su-hero { grid-area: 1 / 1 / 5 / 5; z-index: 1; }
.su-hero > .art { box-shadow: none; }
.su-t0 { grid-area: 1 / 5 / 3 / 7; rotate: 1.5deg; }
.su-t1 { grid-area: 3 / 5 / 5 / 7; }
.su-t2 { grid-area: 5 / 1 / 7 / 3; rotate: -1.5deg; }
.su-t3 { grid-area: 5 / 3 / 7 / 5; }
.su-t4 { grid-area: 5 / 5 / 7 / 7; rotate: 1deg; }
.su-card { position: absolute; z-index: 3; left: 4%; top: 50%; width: min(78%, 520px); display: grid; gap: 10px; padding: clamp(18px, 1.7vw, 28px); }
.su-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.su-card-k { font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.su-card b { font-weight: 800; font-size: clamp(26px, 2.4vw, 42px); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.su-card small { color: var(--ink2); font-size: 15.5px; font-weight: 550; line-height: 1.45; text-wrap: pretty; }
.su-trust { width: min(100%, calc(100dvh - 230px)); min-width: min(100%, 520px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }

@media (max-width: 1000px) {
  .su { grid-template-columns: minmax(0, 1fr); }
  .su-left { padding: 18px 16px 28px; }
  .su-formwrap { margin: 0 auto; padding: 30px 0 32px; }
  .su-right { position: static; height: auto; padding: 24px 16px 36px; }
  .su-wall, .su-trust { width: 100%; min-width: 0; max-width: 640px; }
  .su-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; aspect-ratio: auto; }
  .su-hero { grid-area: auto; grid-column: 1 / -1; aspect-ratio: 1; }
  .su-t0, .su-t1, .su-t2, .su-t3 { grid-area: auto; aspect-ratio: 1; }
  .su-t4 { display: none; }
  .su-tile .cap { display: none; }
  .su-card { left: 14px; right: 14px; top: auto; bottom: calc(25% + 30px); width: auto; }
  .su-card b { font-size: clamp(24px, 7vw, 34px); }
  .su-trust { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .su-field.is-checking .su-state, .su-go[aria-busy="true"]::before { animation-duration: 2s !important; } }