/* Processing feedback: the loader inside a busy button, notices, confirmation dialogs, skeletons.
   Everything here is small and functional. Loaders turn only while something is really pending, and stand still for people who ask for less motion. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* A busy button keeps its place, ignores clicks and shows a ring beside what it is doing. */
button.is-busy{position:relative;cursor:progress;gap:10px;opacity:1}
button.is-busy[disabled]{opacity:1}
.spin{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:vora-spin .8s linear infinite}
@keyframes vora-spin{to{transform:rotate(360deg)}}
/* After everything has been sent, or for a visitor's form post (no measurable progress): the bar only says "still working". */
.bar-wait{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;border-radius:0 0 5px 5px;background:rgba(255,255,255,.2)}
.bar-wait::after{content:"";position:absolute;inset:0 auto 0 -40%;width:40%;background:var(--red,#b43e31);animation:vora-wait 1.1s ease-in-out infinite}
.button-outline.is-busy .bar-wait{background:rgba(16,23,32,.12)}
@keyframes vora-wait{to{left:100%}}

/* Where the form stands: edited, saving, refused. Reserved height, so the line appearing never moves the page. */
.form-status{min-height:1.4em;margin:10px 0 0;font-size:.78rem;color:var(--muted,#64717c)}
.form-status.is-failed{color:#8c2f25;font-weight:600}

/* Notices stay out of the layout. */
.toasts{position:fixed;z-index:60;top:16px;right:16px;display:grid;gap:10px;width:min(420px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;margin:0;padding:14px 14px 14px 16px;border-radius:10px;border:1px solid var(--line,#dce0e1);background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 28px rgba(16,23,32,.16),0 2px 6px rgba(16,23,32,.08);animation:vora-toast .28s cubic-bezier(.2,.8,.2,1) both}
.toast-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:.8rem;font-weight:800;color:#fff;background:var(--success,#276650)}
.toast-queued .toast-mark{background:#6b5a1e}
.toast-error{border-color:#d9a39d;background:#fdf4f2}
.toast-error .toast-mark{background:var(--red,#b43e31)}
.toast-close{border:0;background:transparent;font-size:1.2rem;line-height:1;color:var(--muted,#64717c);cursor:pointer;min-width:32px;min-height:32px;border-radius:6px}
.toast-close:hover{background:rgba(16,23,32,.06)}
@keyframes vora-toast{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:640px){.toasts{top:auto;bottom:12px;right:12px;left:12px;width:auto}}

/* Questions before something that cannot be undone. */
.confirm-dialog{max-width:min(460px,calc(100vw - 32px));padding:24px;border:1px solid var(--line,#dce0e1);border-radius:14px;background:#fff;color:var(--ink,#101720);box-shadow:0 24px 60px rgba(16,23,32,.3)}
.confirm-dialog::backdrop{background:rgba(16,23,32,.5)}
.confirm-dialog[open]{animation:vora-toast .22s cubic-bezier(.2,.8,.2,1) both}
.confirm-dialog h4{margin:0 0 8px;font-size:1.05rem}
.confirm-dialog p{margin:0 0 18px;line-height:1.55;font-size:.9rem}
.confirm-dialog .inline-actions{justify-content:flex-end}

/* Skeletons follow the shape of what is loading. */
.skeleton{display:block;border-radius:6px;background:linear-gradient(90deg,#e9ecee 25%,#f4f5f6 50%,#e9ecee 75%);background-size:200% 100%;animation:vora-shimmer 1.4s linear infinite}
@keyframes vora-shimmer{to{background-position:-200% 0}}
.skeleton-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line,#dce0e1)}
.skeleton-row .skeleton{height:14px}

/* Rows of the item tables: the new row settles in; nothing else moves. */
.items-table tbody tr{animation:vora-row .22s ease-out both}
@keyframes vora-row{from{opacity:0;background:rgba(180,62,49,.08)}to{opacity:1;background:transparent}}
.items-table input:focus-visible{outline:2px solid var(--red,#b43e31);outline-offset:1px}
.items-table tr:focus-within{background:rgba(16,23,32,.03)}

/* Fields answer the keyboard. */
.admin-body input:not([type=checkbox]):not([type=radio]),.admin-body select,.admin-body textarea{transition:border-color .16s ease,box-shadow .16s ease}
.admin-body input:focus-visible,.admin-body select:focus-visible,.admin-body textarea:focus-visible{outline:none;border-color:var(--red,#b43e31);box-shadow:0 0 0 3px rgba(180,62,49,.18)}
.admin-body input:user-invalid,.admin-body textarea:user-invalid,.admin-body select:user-invalid{border-color:var(--red,#b43e31);box-shadow:0 0 0 3px rgba(180,62,49,.12)}
.admin-body button:focus-visible,.admin-body a:focus-visible{outline:3px solid var(--red,#b43e31);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  .spin{animation:none;border-right-color:currentColor;opacity:.7}
  .bar-wait::after{animation:none;inset:0;width:100%;opacity:.6}
  .skeleton{animation:none}
  .toast,.confirm-dialog[open],.items-table tbody tr{animation:none}
}

/* Small answers to the pointer and the keyboard. Each one shows that something responded; none moves on its own. */
.admin-body .button,.admin-body .button-outline{transition:background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .08s ease}
.admin-body .button:active:not([disabled]),.admin-body .button-outline:active:not([disabled]){transform:translateY(1px)}
.admin-body .button[disabled]:not(.is-busy),.admin-body .button-outline[disabled]:not(.is-busy){opacity:.55;cursor:not-allowed}
.admin-body table tbody tr{transition:background-color .14s ease}
.admin-body table tbody tr:hover{background:rgba(16,23,32,.035)}
.admin-sidebar nav a{transition:background-color .16s ease,padding-left .16s ease}
.admin-sidebar nav a:hover:not(.active){padding-left:calc(var(--sidebar-pad,0px) + 3px)}
.admin-body details>summary{transition:color .16s ease}
.admin-body details[open]>*:not(summary){animation:vora-reveal .2s ease-out both}
.metric[href]{transition:box-shadow .18s ease,transform .18s ease}
.metric[href]:hover{transform:translateY(-2px)}
@keyframes vora-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .admin-body details[open]>*:not(summary),.metric[href]:hover,.admin-body .button:active,.admin-body .button-outline:active{animation:none;transform:none}
}

/* The seal placer: a page of the PDF with the seal as a box to drag onto it. */
.seal-placer{min-width:0;max-width:100%;overflow-x:hidden}
.seal-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:8px 0 12px}
.seal-controls fieldset{border:1px solid var(--line,#dce0e1);border-radius:8px;padding:8px 12px 10px;margin:0}
.seal-controls legend{font-size:.72rem;font-weight:700;color:var(--muted,#64717c);padding:0 6px}
.seal-controls label{display:flex;gap:8px;align-items:center;font-weight:400;min-height:32px}
.seal-controls input[type=radio]{width:auto;min-height:0;margin:0}
.seal-corners{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seal-corners button{min-height:36px;font-size:.72rem;padding:4px 6px}
.seal-pager{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:6px 0}
.seal-pager>span{flex:1 1 140px;min-width:0}
.seal-pager .button-outline{min-height:36px}
.seal-stage{position:relative;max-width:100%;border:1px solid var(--line,#dce0e1);background:#fff;box-shadow:0 8px 24px rgba(16,23,32,.12);line-height:0;user-select:none}
.seal-stage canvas{display:block;max-width:100%}
.seal-box{position:absolute;display:flex;gap:6%;align-items:center;padding:3%;box-sizing:border-box;border:1.5px dashed var(--red,#b43e31);border-top:3px solid var(--red,#b43e31);background:rgba(255,255,255,.9);cursor:grab;line-height:1.2;color:var(--ink,#101720);transition:box-shadow .15s ease}
.seal-box:hover,.seal-box:focus-visible{box-shadow:0 0 0 3px rgba(180,62,49,.25),0 6px 16px rgba(16,23,32,.2);outline:none}
.seal-box.is-dragging{cursor:grabbing;box-shadow:0 0 0 3px rgba(180,62,49,.35),0 10px 24px rgba(16,23,32,.28)}
.seal-qr{flex:none;aspect-ratio:1;height:100%;background:repeating-conic-gradient(var(--ink,#101720) 0 25%,#fff 0 50%) 0 0/22% 22%;border:2px solid var(--ink,#101720)}
.seal-lines{display:grid;gap:3px;min-width:0;flex:1}
.seal-lines b{font-size:.85em;color:var(--red,#b43e31);white-space:nowrap;overflow:hidden;text-overflow:clip}
.seal-lines i{display:block;height:.5em;border-radius:2px;background:rgba(16,23,32,.2)}
.seal-lines i:nth-child(3){width:70%}.seal-lines i:nth-child(4){width:50%}
@media(prefers-reduced-motion:reduce){.seal-box{transition:none}}

.list-skeleton{display:block;padding:2px 0}
.list-skeleton__row{display:grid;gap:18px;padding:15px 8px;border-bottom:1px solid var(--line,#dce0e1)}
.list-skeleton__row .skeleton{height:14px}

/* A bar that is as long as the share of the file the browser has really sent. */
.bar-sent{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;border-radius:0 0 5px 5px;background:rgba(255,255,255,.2)}
.bar-sent>span{display:block;height:100%;background:var(--red,#b43e31);transition:width .12s linear}
.button-outline.is-busy .bar-sent{background:rgba(16,23,32,.12)}
@media (prefers-reduced-motion:reduce){.bar-sent>span{transition:none}}

/* Email template editor: text on the left, the server's preview on the right. */
.tpl-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:12px}
.tpl-editor textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;line-height:1.5}
.tpl-vars{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}
.tpl-var{border:1px solid var(--line,#dce0e1);background:#fff;border-radius:6px;padding:3px 8px;font:inherit;font-size:.78rem;cursor:pointer}
.tpl-var:hover,.tpl-var:focus-visible{border-color:var(--red,#b43e31);color:var(--red,#b43e31)}
.tpl-editor__preview{border:1px solid var(--line,#dce0e1);border-radius:8px;background:#fff;padding:12px;min-width:0}
.tpl-preview__bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.tpl-preview__subject{margin:0 0 8px;font-weight:600}
.tpl-editor iframe{width:100%;height:340px;border:1px solid var(--line,#dce0e1);border-radius:6px;background:#fff}
.tpl-preview__skeleton{height:340px;border-radius:6px}
@media (max-width:900px){.tpl-editor{grid-template-columns:minmax(0,1fr)}}