/* Shared by the customer pages (proof, booking, brief) and welcome/login. Loads after app.css.
   Keyboard focus, 44px tap targets, busy buttons, inline field errors, the load-failure card, the typed signature. */

/* a focus ring you can see (keyboard only; mouse clicks stay clean) */
:root{--focus-ring:#1d4fd8}
:root.plotr{--focus-ring:#0E1414}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.opt:has(input:focus-visible),.check:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:10px}
.opt input:focus-visible,.check input:focus-visible{outline:none}

/* tap targets */
.btn{min-height:44px}
.btn.big{min-height:48px}
.opt{min-height:44px}
.files button{min-height:44px;padding:0 8px}

/* primary buttons and links stay readable whatever the shop's colours (pages set --on-accent / --link) */
.btn.primary{color:var(--on-accent,#fff)}
.cust a:not(.btn){color:var(--link,var(--accent-d))}

/* busy buttons: disabled, with a spinner, while a request is on its way */
.btn.busy,.btn.busy:disabled{opacity:.8;cursor:progress}
.btn.busy::before{content:'';flex:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}

/* inline field errors outside the .q blocks (proof page) */
[data-k].bad>input,[data-k].bad>textarea,[data-k].bad>select{border-color:var(--bad)}
[data-k].bad>.check{color:var(--bad)}

/* the page couldn't load */
.loadfail{text-align:center;padding:28px 18px}
.loadfail h2{font-size:20px;margin:14px 0 6px}
.loadfail p{margin:0 auto 10px;max-width:46ch}
.loadfail .acts{margin:18px 0 6px}

/* brief: the file drop zone is a real button */
button.drop{display:block;width:100%;font:inherit;line-height:1.5}

/* proof: the PDF button */
.pdfbtn{width:100%}

/* booking: draw or type the signature */
.sigmode{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.sigmode .btn[aria-pressed="true"]{border-color:var(--accent);background:#f0f8ff;font-weight:600}
.sigprev{font:italic 400 40px/1.3 'Segoe Script','Brush Script MT','Snell Roundhand','Apple Chancery',cursive;color:#1b1b6f;min-height:70px;border:1px dashed #c9d3ea;border-radius:10px;padding:8px 14px;margin:8px 0 4px;background:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sigprev:empty::before{content:'Your signature appears here';font:14px/52px Poppins,system-ui,sans-serif;color:var(--muted)}
/* proof page: the customer's own small edits */
.selfedit{background:var(--soft,#f4f6f7);border-radius:12px;padding:14px;margin:0 0 4px}
.selfedit p{margin:0 0 10px;font-size:15px;line-height:1.45}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:14px 0 10px}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}
/* the design they just changed: a gentle glow so they see it's the new one */
@media (prefers-reduced-motion: no-preference){
  .proofimg.fresh{animation:freshIn .9s cubic-bezier(.2,.8,.2,1) both,freshGlow 2.4s ease .6s 2}
  .selfedit .btn{transition:transform .15s}.selfedit .btn:hover{transform:translateY(-1px)}
}
@keyframes freshIn{from{opacity:0;transform:scale(.97)}}
@keyframes freshGlow{0%,100%{box-shadow:0 0 0 0 rgba(43,212,160,0)}40%{box-shadow:0 0 0 6px rgba(43,212,160,.35)}}