/* Hallmark · macrostructure: single-question stepper with a persistent job ticket (quote) · one-sheet order ticket with a sticky title column (bag) · tone: utilitarian print-shop · anchor: the four strands on ink
   Tokens only. No colour value or font-family is written in this file; everything resolves to site.css custom properties. */

.qt [hidden],.ot [hidden]{display:none!important}
.qt,.ot{padding-top:var(--space-lg)}

/* ---------- shared: fieldsets, the ticket card ---------- */
.fs{border:0;margin:0;padding:0;min-inline-size:0}
.fs legend{display:block;padding:0;margin:0 0 var(--space-md);max-width:100%;overflow-wrap:anywhere}
.fs legend:focus{outline:none}
.fs legend:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.fs .help{margin:0 0 var(--space-2xs)}
.fs .field label{overflow-wrap:anywhere}
.stub{position:relative;isolation:isolate;background:var(--ground-2);border:2px solid var(--line);border-radius:var(--chamfer-c) var(--chamfer) var(--chamfer) var(--chamfer);padding:clamp(20px,3vw,40px);min-width:0}
.stub::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:0 var(--space-lg) var(--space-xl) calc(-1 * var(--space-md)) color-mix(in oklch,var(--ground-3) 90%,transparent);opacity:.6;pointer-events:none}
.stub dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-xs) var(--space-md);margin:0;font:500 14px/1.5 var(--font-mono)}
.stub dt{color:var(--text-3);letter-spacing:.12em;font-size:12px;padding-top:2px}
.stub dd{margin:0;overflow-wrap:anywhere;min-width:0}
.stub dd[data-empty]{color:var(--text-3)}
.btn--icon{width:48px;padding:0;font-size:var(--text-md)}
.input[type=file]{padding:7px 10px;line-height:1;cursor:pointer}
.input[type=file]::file-selector-button{height:32px;margin-right:var(--space-xs);padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--ground-2);color:var(--text);font:650 13px/1 var(--font-body);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.input[type=file]:hover::file-selector-button{border-color:var(--text);background:var(--ground-3)}
.input[type=file]:active::file-selector-button{transform:translateY(1px)}
.input[type=file]:disabled::file-selector-button{cursor:not-allowed}
textarea.input{resize:vertical;min-height:96px}
.input:active{border-color:var(--text)}

/* choice rows: large text rows built on site.css .choice */
.choice--rows{display:grid;gap:var(--space-2xs)}
.choice--rows label{position:relative;height:auto;min-height:56px;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);font:650 var(--text-md)/1.25 var(--font-body);gap:var(--space-sm);overflow-wrap:anywhere;min-width:0;transition:border-color var(--dur-fast),background-color var(--dur-fast),transform var(--dur-fast) var(--ease-press)}
.choice--rows label:active{transform:translateY(1px)}
.qt .choice--rows{counter-reset:row}
.qt .choice--rows label::before{counter-increment:row;content:counter(row,upper-alpha);flex:none;font:600 12px/1 var(--font-mono);letter-spacing:.12em;opacity:.7}
.choice label:active{transform:translateY(1px)}
.choice label:not(:has(input:checked)):hover{border-color:var(--text)}
.choice label:has(input:checked):hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* ---------- quote: the stepper and the job ticket ---------- */
.qt{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,72px);align-items:start}
.qt__main{min-width:0}
.qt__prog{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2xs);margin:0;padding:0}
.qt__prog li{position:relative;height:6px;border-radius:var(--radius-pill);background:var(--line);overflow:clip}
.qt__prog li::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-slow) var(--ease-out)}
.qt__prog li[data-state=current]::after{transform:scaleX(.4)}
.qt__prog li[data-state=done]::after{transform:scaleX(1)}
.qt__prog li:nth-child(1){--c:var(--mag)}
.qt__prog li:nth-child(2){--c:var(--blu)}
.qt__prog li:nth-child(3){--c:var(--grn)}
.qt__prog li:nth-child(4){--c:var(--yel)}
.qt__prog li:nth-child(5){--c:var(--text)}
.qt__count{margin:var(--space-xs) 0 var(--space-lg);font-size:12px;color:var(--text-2)}
.qt legend.h2{font-size:var(--text-xl)}
.qt__form .fs{animation:none}
.qt__form .fs.is-in{animation:qt-in var(--dur-base) var(--ease-out) both}
.qt__form .fs.is-in[data-dir=back]{animation-name:qt-in-back}
@keyframes qt-in{from{opacity:0;transform:translate(24px,0)}}
@keyframes qt-in-back{from{opacity:0;transform:translate(-24px,0)}}
.qt__qty{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-xs)}
.qt__qty .input{width:112px;flex:none;text-align:center;font-family:var(--font-mono)}
.qt__when{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}
.qt__when .input{flex:1 1 180px;min-width:0}
.qt__nav{margin-top:var(--space-md)}
.qt__final h2{font-size:var(--text-xl)}
.qt__final .btns{margin:var(--space-md) 0 var(--space-sm)}
.qt__final .help{min-height:0;max-width:56ch}
.jt{position:sticky;top:calc(var(--frame) + var(--space-md))}
.jt .eyebrow{padding-bottom:var(--space-sm);margin-bottom:var(--space-md);border-bottom:1.5px dashed var(--line)}
.jt.is-pressed{animation:ticket-press var(--dur-slow) var(--ease-press) both}
.jt.is-pressed::before{animation:ticket-shadow var(--dur-slow) var(--ease-press) both}
@keyframes ticket-press{from{transform:scale(1.02)}to{transform:scale(1)}}
@keyframes ticket-shadow{from{opacity:1}to{opacity:.6}}

/* ---------- bag: the order ticket ---------- */
.ot{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,4vw,72px);align-items:start}
.ot__head{position:sticky;top:calc(var(--frame) + var(--space-md));min-width:0}
.ot__head .display{font-size:var(--text-2xl)}
.ot__price{margin:var(--space-md) 0 0;font-size:12px;color:var(--text-2);line-height:1.5}
.ot__body{min-width:0}
.ot__ticket{counter-reset:sec}
.ot__sec{counter-increment:sec;margin:var(--space-lg) 0 0;padding:var(--space-lg) 0 0;border-top:1.5px dashed var(--line)}
.ot__ticket > .ot__sec:first-child{margin-top:0;padding-top:0;border-top:0}
.ot__sec :is(legend,h2)::before{content:counter(sec,decimal-leading-zero);display:inline-block;margin-right:var(--space-xs);font:600 12px/1 var(--font-mono);letter-spacing:.12em;color:var(--c,var(--text));vertical-align:middle}
.ot__lines{list-style:none;margin:0 0 var(--space-md);padding:0;display:grid;gap:var(--space-sm)}
.ot__line{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:var(--space-sm);align-items:center}
.ot__line img{width:72px;height:96px;object-fit:cover;border-radius:10px;background:var(--ground-3)}
.ot__line strong{display:block;overflow-wrap:anywhere}
.ot__line small{display:block;font:500 11px/1.5 var(--font-mono);color:var(--text-3);overflow-wrap:anywhere}
.ot__line .mono{font-size:13px;color:var(--text-2)}
.ot__ph{margin:var(--space-xs) 0 var(--space-2xs)}
.ot__nav{margin-top:var(--space-lg)}
.ot__empty .lede{margin-top:0}
.ot__ref{margin:0 0 var(--space-md);font-size:12px;color:var(--text-2)}
.ot__msg{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 var(--space-md);padding:var(--space-sm);background:var(--ground-3);border-radius:12px;font:500 13px/1.5 var(--font-mono)}
#ot-final h2{font-size:var(--text-xl)}
#ot-final .help{min-height:0;margin:var(--space-sm) 0}
#ot-final .btns{margin:0 0 var(--space-sm)}

/* the verbatim footer ticket: let the email address wrap instead of clipping at 320 and 375 */
.page .ticket dd{min-width:0;overflow-wrap:anywhere}

/* ---------- small screens ---------- */
@media (max-width:900px){
  .qt,.ot{grid-template-columns:minmax(0,1fr)}
  .jt,.ot__head{position:static}
}
@media (max-width:480px){
  .ot__line{grid-template-columns:56px minmax(0,1fr) auto;gap:var(--space-xs)}
  .ot__line img{width:56px;height:75px}
  .choice--rows label{font-size:var(--text-base);padding:var(--space-xs) var(--space-sm)}
  .qt .btns .btn,.ot .btns .btn{padding:0 var(--space-md)}
}

/* ---------- reduced motion: no slide, no press, no weave ---------- */
@media (prefers-reduced-motion:reduce){
  .qt__form .fs.is-in,.jt.is-pressed,.jt.is-pressed::before{animation:none}
  .qt__prog li::after,.choice--rows label,.choice label,.input[type=file]::file-selector-button{transition:none}
  .choice--rows label:active,.choice label:active{transform:none}
}
.jt__thumb{margin:0 0 var(--space-sm)}.jt__thumb img{width:96px;height:auto;border-radius:12px;background:var(--ground-3)}