/* "What's the job?": three taps (where, what's up, how soon) write a message to Ben, ready for
   WhatsApp or email, with optional boxes for a name, a postcode and anything else. On the home page
   it takes the place of the quote form; on the games page it's the third game (with job.js).
   Everything here starts with .picker or .pk, so it can't clash with the page around it, and it
   uses the page's own colours (--ink, --muted, --sky, --water-deep). */
.picker{--pk-ease:cubic-bezier(.23,1,.32,1);display:grid;gap:22px;min-width:0}
.picker[hidden],.picker [hidden]{display:none}
/* On the games page, on a computer, the three questions sit side by side. */
@media(min-width:960px){.picker.pk-wide{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:36px}.picker.pk-wide .pk-result{grid-column:1/-1}}
.pk-step{border:0;margin:0;padding:0;min-width:0}
.pk-step legend{padding:0;margin-bottom:8px;font-family:var(--head);font-weight:800;font-size:19px;line-height:1.2;color:var(--ink)}
/* The answers, as a plain list with lines between. */
.pk-opts{border-top:1px solid #DDE2E7}
.pk-opt{display:flex;align-items:center;gap:14px;min-height:50px;padding:10px 4px;border-bottom:1px solid #DDE2E7;font-weight:700;font-size:16.5px;line-height:1.3;color:var(--ink);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.pk-opt input{flex:none;-webkit-appearance:none;appearance:none;width:22px;height:22px;margin:0;border:2px solid #737B85;border-radius:50%;display:grid;place-items:center;background:#fff;cursor:pointer;transition:border-color .15s ease}
.pk-opt input::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--water-deep);opacity:0;transform:scale(.5);transition:opacity .15s ease,transform .16s var(--pk-ease)}
.pk-opt input:checked{border-color:var(--water-deep)}
.pk-opt input:checked::after{opacity:1;transform:none}
.pk-opt input:focus-visible{outline:3px solid var(--water-deep);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.pk-opt:hover{color:var(--water-deep)}}
/* Each question, and the message, arrives once as it's needed. */
.pk-step,.pk-result{animation:pk-arrive .25s var(--pk-ease)}
@keyframes pk-arrive{from{opacity:0;transform:translateY(8px)}}
.pk-result{display:grid;gap:16px;min-width:0}
.picker .pk-result h3{padding:0;font-size:20px;font-weight:800}
/* The message, as a speech bubble to Ben. */
.pk-bubble{position:relative;max-width:560px;margin-bottom:6px;background:var(--sky);border-radius:20px;padding:18px 22px;font-size:17.5px;line-height:1.55;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.pk-bubble::after{content:"";position:absolute;left:30px;top:calc(100% - 1px);width:24px;height:14px;background:var(--sky);clip-path:polygon(0 0,100% 0,8% 100%)}
/* The optional extras. */
.pk-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.pk-two{grid-template-columns:1fr}}
.pk-field{display:grid;gap:6px;min-width:0}
.pk-field label{font-weight:700;font-size:14.5px;color:var(--ink)}
.pk-field label span{font-weight:600;color:var(--muted)}
.pk-field input,.pk-field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid #8A929C;border-radius:12px;padding:12px 14px}
.pk-field textarea{min-height:96px;resize:vertical}
.pk-field input:focus,.pk-field textarea:focus{border-color:var(--water-deep);outline:3px solid rgba(31,102,128,.25);outline-offset:1px}
.pk-send{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:520px){.pk-send .btn{flex:1 1 100%}}
.pk-again{justify-self:start;background:none;border:0;padding:4px 0;font:inherit;font-weight:700;color:var(--water-deep);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.pk-said{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){
  .pk-step,.pk-result{animation-name:pk-fade}
  @keyframes pk-fade{from{opacity:0}}
  .pk-opt input,.pk-opt input::after{transition:none}
}