/* Transfers inside Shopify POS - page styles on top of the Explorer shell's
   tokens.css and components.css. Same palette, type and radii as the app;
   sized for a hand and an iPad at arm's length: 44 px hit areas, dense
   tables, one accent. */
:root{--pa-max:1180px; --pa-touch:44px; --body-size:var(--t-sm)}
html,body{height:100%}
body{background:var(--bg); color:var(--text); font-family:var(--ui); -webkit-text-size-adjust:100%; overscroll-behavior:none}
.pa{min-height:100%; display:flex; flex-direction:column}
button{font:inherit}
.btn{min-height:var(--pa-touch); padding:0 var(--s5); font-size:var(--t-sm); border-radius:var(--r-ctl)}
.btn.sm{min-height:36px; padding:0 var(--s4); font-size:var(--t-dense)}
.btn.icon{padding:0 var(--s4); gap:var(--s2)}
.btn svg{width:16px; height:16px}
.input{height:var(--pa-touch); font-size:var(--t-base)}
.input.qty{width:64px; height:40px; text-align:center; padding:0}

/* boot */
.pa-boot{margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--s3); padding:var(--s10)}
.pa-boot-t{font-size:var(--t-xl); font-weight:var(--w-semi); letter-spacing:-.02em}
.pa-boot-s{color:var(--text-muted); font-size:var(--t-dense)}

/* top bar */
.pa-top{display:flex; align-items:center; gap:var(--s4); padding:var(--s3) var(--s6); border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:5}
.pa-top .mark{width:28px; height:28px; flex:0 0 auto}
.pa-top h1{font-size:var(--t-lg); line-height:1; letter-spacing:-.02em; white-space:nowrap}
.pa-top .shop{display:inline-flex; align-items:center; gap:6px; padding:0 var(--s3); height:26px; border:1px solid var(--line-control); border-radius:var(--r-pill); font-size:var(--t-xs); color:var(--text-2); font-weight:var(--w-medium); white-space:nowrap}
.pa-top .shop::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ok9)}
.pa-top .shop.off::before{background:var(--at9)}
.pa-top .spacer{flex:1}
.pa-top .sync{font-size:var(--t-xs); color:var(--text-muted); font-family:var(--mono); white-space:nowrap}
.pa-top .sync.warn{color:var(--at11)}
.pa-top .back{margin-left:calc(var(--s2) * -1)}

/* content */
.pa-main{flex:1; width:100%; max-width:var(--pa-max); margin:0 auto; padding:var(--s5) var(--s6) var(--s10); display:flex; flex-direction:column; gap:var(--s5)}
.pa-tabs{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4)}
.tabs [role="tab"]{min-height:var(--pa-touch); font-size:var(--t-sm); padding:var(--s3) var(--s1)}
.tabs .count{display:inline-block; min-width:20px; padding:0 6px; height:20px; line-height:20px; text-align:center; border-radius:var(--r-pill); background:var(--n4); color:var(--text-2); font-family:var(--mono); font-size:var(--t-micro)}
.tabs [aria-selected="true"] .count{background:var(--a3); color:var(--a11)}
.pa-actions{display:flex; gap:var(--s2); flex-wrap:wrap}

/* rows: one transfer */
.tablewrap{background:var(--surface)}
table.pa-list{table-layout:fixed}
table.pa-list td,table.pa-list th{padding:var(--s3) var(--s4); vertical-align:middle; border-bottom:1px solid var(--line)}
table.pa-list tbody tr{cursor:pointer}
table.pa-list tbody tr:hover{background:var(--hover)}
table.pa-list tbody tr:active{background:var(--pressed)}
table.pa-list tbody tr:last-child td{border-bottom:0}
table.pa-list .ref{font-family:var(--mono); font-weight:var(--w-medium); white-space:nowrap}
table.pa-list .route{color:var(--text-2)}
table.pa-list .route b{color:var(--text); font-weight:var(--w-medium)}
table.pa-list .skus{display:flex; gap:4px; flex-wrap:wrap}
.sku{display:inline-block; padding:1px 6px; border-radius:3px; background:var(--surface-alt); border:1px solid var(--line); font-family:var(--mono); font-size:var(--t-xs); color:var(--text-2); white-space:nowrap}
.sku.more{border-style:dashed; color:var(--text-muted)}
table.pa-list .chev{width:28px; color:var(--text-muted); text-align:right}
table.pa-list .chev svg{width:14px; height:14px}
.chip.in{background:var(--in3); color:var(--in11)}
.chip{height:22px; font-size:var(--t-xs); font-weight:var(--w-medium); border-radius:var(--r-pill); white-space:nowrap}

/* empty */
.pa-empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s2); padding:var(--s10) var(--s6); border:1px dashed var(--line-control); border-radius:var(--r-card); color:var(--text-muted)}
.pa-empty svg{width:28px; height:28px; opacity:.7; margin-bottom:var(--s2)}
.pa-empty h3{font-size:var(--t-base); color:var(--text)}
.pa-empty p{max-width:46ch; font-size:var(--t-dense)}
.pa-empty .acts{margin-top:var(--s3); display:flex; gap:var(--s2)}

/* two-column screens */
.pa-cols{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:var(--s5); align-items:start}
@media (max-width: 900px){.pa-cols{grid-template-columns:1fr}}
.card > header{padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:var(--s3)}
.card > header h3{font-size:var(--t-sm); font-weight:var(--w-semi)}
.card > header .sub{margin-left:auto}
.card > .body{padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4)}
.card > .body.tight{padding:0}
.kv{display:grid; grid-template-columns:110px 1fr; gap:var(--s2) var(--s4); font-size:var(--t-dense)}
.kv dt{color:var(--text-muted)}
.kv dd{margin:0; color:var(--text)}
.addr{font-size:var(--t-sm); line-height:1.5; white-space:pre-line}
.addr b{display:block; font-weight:var(--w-semi)}
.pa-status{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.pa-status .meta{font-size:var(--t-dense); color:var(--text-muted)}

/* item rows with thumbnails */
table.items td{padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); vertical-align:middle}
table.items tr:last-child td{border-bottom:0}
.thumb{width:44px; height:44px; border-radius:var(--r-ctl); background:var(--surface-alt); border:1px solid var(--line); object-fit:cover; display:block; flex:0 0 auto}
.thumb.empty{display:grid; place-items:center; color:var(--text-muted)}
.thumb.empty svg{width:18px; height:18px}
.item{display:flex; align-items:center; gap:var(--s4); min-width:0}
.item .t{min-width:0}
.item .t .s{font-family:var(--mono); font-weight:var(--w-medium); font-size:var(--t-sm)}
.item .t .n{font-size:var(--t-xs); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qtyc{display:inline-flex; align-items:center; gap:2px}
.qtyc .btn{min-height:40px; width:40px; padding:0; font-size:18px; line-height:1}
.qtyc .input{height:40px}
.of{font-family:var(--mono); color:var(--text-muted); font-size:var(--t-xs); margin-left:var(--s2); white-space:nowrap}

/* search */
.search{position:relative}
.search .input{width:100%; padding-left:40px; font-size:var(--t-base)}
.search .ico{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-muted); pointer-events:none}
.results{margin-top:var(--s2); border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden}
.results .r{display:flex; align-items:center; gap:var(--s4); padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); cursor:pointer; min-height:var(--pa-touch)}
.results .r:last-child{border-bottom:0}
.results .r:hover{background:var(--hover)}
.results .r .item{flex:1}
.results .hint{padding:var(--s3) var(--s4); color:var(--text-muted); font-size:var(--t-dense)}

/* place picker */
.places{display:flex; flex-wrap:wrap; gap:var(--s2)}
.places .btn[aria-pressed="true"]{background:var(--a3); border-color:var(--a6); color:var(--text)}

/* progress */
.prog{height:6px; border-radius:3px; background:var(--surface-alt); overflow:hidden}
.prog > i{display:block; height:100%; background:var(--a9); transition:width .2s}
.prog.done > i{background:var(--ok9)}

/* alerts are from components.css; give them room to breathe here */
.alert{font-size:var(--t-sm)}
.alert .acts .btn{min-height:40px}

/* pair */
.pa-pair{max-width:520px; margin:var(--s10) auto 0; width:100%}
.pa-pair .code{font-family:var(--mono); font-size:32px; letter-spacing:.35em; text-align:center; height:64px}
.steps{display:flex; flex-direction:column; gap:var(--s2); font-size:var(--t-sm)}
.steps li{display:flex; gap:var(--s3); align-items:baseline}
.steps li b{font-family:var(--mono); color:var(--a11); flex:0 0 auto}
ol.steps{list-style:none; padding:0; margin:0}

/* footer bar for the primary action on tall screens */
.pa-foot{display:flex; align-items:center; gap:var(--s3); justify-content:flex-end; padding-top:var(--s2)}
.pa-foot .note{margin-right:auto; color:var(--text-muted); font-size:var(--t-dense)}

/* toasts */
.toaster{bottom:max(var(--s5), env(safe-area-inset-bottom))}