/* tools/frame.css — the workspace every batch tool on /tools shares.
   Three screens people already know from every converter: one drop panel and one
   button; then the files with the options and a single big action beside them;
   then the same column turned into the way out. data-stage on #ws: empty · ready ·
   busy · done. Square corners, hairlines, one type scale, plain words, no
   celebration. Phone: options fold into a sheet, the action docks at the bottom.
   The RAW converter carries the same rules in tools/raw/app.css. */
[hidden]{display:none !important;}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wsin{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes cardin{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* ---- buttons ---- */
.ws .btn-w{height:46px; border-radius:0; border:0; background:#fff; color:#1D1D21; display:inline-flex; align-items:center; gap:10px; padding:0 24px; font-size:14.5px; font-weight:600; font-family:inherit; box-shadow:none; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background 160ms;}
.ws .btn-w:hover{background:#ECECEA; transform:none; box-shadow:none;}
.ws .btn-o{height:46px; border-radius:0; border:1px solid rgba(255,255,255,.22); background:transparent; color:#F4F4F2; display:inline-flex; align-items:center; gap:10px; padding:0 22px; font-size:14.5px; font-family:inherit; cursor:pointer; text-decoration:none; white-space:nowrap; transition:border-color 160ms, background 160ms;}
.ws .btn-o:hover{border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.05);}
.ws .btn-g{height:46px; border:0; background:transparent; color:rgba(255,255,255,.62); display:inline-flex; align-items:center; padding:0 12px; font-size:14px; font-family:inherit; cursor:pointer; transition:color 160ms;}
.ws .btn-g:hover{color:#fff;}
.ws .btn-w:disabled,.ws .btn-o:disabled,.ws .btn-g:disabled{opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none;}
.ws .btn-w svg,.ws .btn-o svg{width:14px; height:14px; flex:none;}

/* ---- the frame ---- */
.ws{padding:30px 56px 52px; border-bottom:1px solid rgba(255,255,255,.06);}
.ws-head{max-width:860px;}
.ws-k{display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.5); font-size:12.5px;}
.ws-k a{color:rgba(255,255,255,.5); text-decoration:none;} .ws-k a:hover{color:#fff;}
.ws-k b{color:#fff; font-weight:500;}
.ws-h1{margin:10px 0 0; color:#fff; font-size:28px; font-weight:600; letter-spacing:-.8px; line-height:1.08;}
.ws-sub{margin:6px 0 0; color:rgba(255,255,255,.55); font-size:14px; line-height:1.55; max-width:70ch;}
.ws-steps{display:flex; gap:0; margin:12px 0 0; padding:0; list-style:none; color:rgba(255,255,255,.38); font-size:12.5px;}
.ws-steps li{display:flex; align-items:baseline; gap:5px; padding-right:18px; margin-right:12px; position:relative;}
.ws-steps li::after{content:''; position:absolute; right:0; top:50%; width:6px; height:1px; background:rgba(255,255,255,.18);}
.ws-steps li:last-child{padding-right:0; margin-right:0;} .ws-steps li:last-child::after{display:none;}
.ws-steps b{display:inline; font-weight:500; font-size:12.5px; font-variant-numeric:tabular-nums; color:inherit;}
.ws-steps b::after{content:'.';}
.ws-steps li.on{color:#fff;} .ws-steps li.past{color:rgba(255,255,255,.55);}

/* 1 · pick */
.ws .drop{position:relative; box-sizing:border-box; max-width:1480px; margin:22px auto 0; padding:44px 32px 36px; text-align:center; display:flex; flex-direction:column; align-items:center; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.025); cursor:pointer; transition:border-color 160ms, background 160ms; outline:none;}
.ws .drop:hover,.ws .drop.on,.ws .drop.over,.ws .drop:focus-visible{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.04);}
.ws .drop .big{color:#fff; font-size:18px; font-weight:600; letter-spacing:-.2px;}
.ws .drop .sub{color:rgba(255,255,255,.55); font-size:13.5px; margin-top:6px; line-height:1.55; max-width:52ch;}
.ws .drop .row{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; flex-wrap:wrap;}
.ws .drop .row .btn-w{height:40px; padding:0 18px; font-size:13.5px;}
.ws .drop .row .btn-o{height:40px; padding:0 16px; font-size:13.5px; border-color:rgba(255,255,255,.18);}
.ws .drop .row .btn-g{height:40px; font-size:13px; color:rgba(255,255,255,.5);}
.ws .fmts{display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin-top:18px;}
.ws .fmts span{color:rgba(255,255,255,.4); font-size:10.5px; font-weight:500; letter-spacing:.04em; border:1px solid rgba(255,255,255,.1); padding:3px 6px;}
.ws[data-stage="empty"] .ws-body{display:none;}
.ws:not([data-stage="empty"]) .drop{display:none;}

/* 2 · the files and the options */
.ws-body{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; margin-top:28px; align-items:start; max-width:1480px;}
.ws-main{min-width:0; animation:wsin .3s ease both;}
.ws-bar{display:flex; align-items:center; gap:4px; min-height:36px; flex-wrap:wrap;}
.ws-count{color:#fff; font-size:13px; font-weight:500; margin-right:10px; font-variant-numeric:tabular-nums;}
.ws .status{color:rgba(255,255,255,.55); font-size:12.5px; font-variant-numeric:tabular-nums;}
.ws-bar .btn-g{height:32px; padding:0 10px; font-size:13px; color:rgba(255,255,255,.6);}
.ws-foot{color:rgba(255,255,255,.36); font-size:12px; margin-top:18px; line-height:1.6;}
.selbar{display:flex; align-items:center; gap:4px; margin-top:10px; padding:0 4px 0 14px; height:36px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); color:#fff; font-size:12.5px;}
.selbar span{flex:1;}
.selbar .btn-g{height:36px; font-size:12.5px;}
.ws-err{margin-top:10px; padding:12px 14px; background:rgba(240,160,160,.08); box-shadow:inset 0 0 0 1px rgba(240,160,160,.35); color:#F6C8C8; font-size:12.5px; line-height:1.5;}
.ws-err button{display:block; margin-top:8px; background:transparent; border:0; color:#fff; font:inherit; font-weight:600; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px;}

/* the inspector */
.ws-side{position:sticky; top:80px;}
.ws-stephead{color:rgba(255,255,255,.4); font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px;}
.ws-set summary{list-style:none; display:none; cursor:default; color:#fff; font-size:13px; font-weight:600; margin:0 0 10px; justify-content:space-between; align-items:center;}
.ws-set summary::-webkit-details-marker{display:none;}
.ws-side .panel{display:grid; grid-template-columns:1fr; gap:0; padding:0 16px; background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}
.ws-side .ir{display:grid; grid-template-columns:76px 1fr; gap:4px 12px; align-items:center; padding:12px 0; border-top:1px solid rgba(255,255,255,.07);}
.ws-side .ir:first-child{border-top:0;}
.ws-side .ir > .fl{margin:0; display:block; font-size:12.5px; font-weight:500; color:rgba(255,255,255,.6); letter-spacing:0;}
.ws-side .hint{font-size:11.5px; color:rgba(255,255,255,.38); margin-top:5px; line-height:1.45;}
.ws-side .seg{display:inline-flex; width:100%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); background:transparent; padding:0; gap:0; border:0;}
.ws-side .seg button{flex:1; height:32px; border:0; border-radius:0; background:transparent; color:rgba(255,255,255,.66); font-size:12.5px; font-weight:500; font-family:inherit; padding:0 8px; cursor:pointer; transition:background 140ms, color 140ms;}
.ws-side .seg button + button{box-shadow:inset 1px 0 0 rgba(255,255,255,.14);}
.ws-side .seg button.on{background:#fff; color:#1D1D21;}
.ws-side .seg button:disabled{opacity:.5; cursor:not-allowed;}
.ws-side select.sel{appearance:none; -webkit-appearance:none; width:100%; box-sizing:border-box; height:34px; border-radius:0; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 12px center; color:#F4F4F2; font-size:13px; font-family:inherit; padding:0 30px 0 10px; outline:none; cursor:pointer;}
.ws-side select.sel:focus{border-color:rgba(255,255,255,.48);}
.ws-side select.sel option{background:#1C1C20; color:#fff;}
.ws-side input.sel{height:34px; border:1px solid rgba(255,255,255,.18); border-radius:0; background:rgba(255,255,255,.04); color:#F4F4F2; padding:0 10px; width:100%; box-sizing:border-box; font:500 12.5px ui-monospace,SFMono-Regular,Menlo,monospace; outline:none;}
.ws-side input.sel:focus{border-color:rgba(255,255,255,.5);}
.ws-side input.sel.txt{font-family:inherit; font-size:13px;}
.ws-side .range{display:flex; align-items:center; gap:10px; height:34px;}
.ws-side .range input[type=range]{flex:1; accent-color:#F4F4F2; height:28px; margin:0;}
.ws-side .range output{color:#fff; font-size:13px; font-weight:600; min-width:24px; text-align:right; font-variant-numeric:tabular-nums;}
.ws-side .chk{display:flex; align-items:center; gap:10px; color:#F4F4F2; font-size:13px; cursor:pointer; height:auto; white-space:nowrap;}
.ws-side .chk input{width:14px; height:14px; accent-color:#F4F4F2; margin:0;}
.ws-side .chips{display:flex; flex-wrap:wrap; gap:6px;}
.ws-side .chips button{height:30px; padding:0 10px; border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); background:transparent; color:rgba(255,255,255,.66); font-size:12.5px; font-weight:500; font-family:inherit; cursor:pointer;}
.ws-side .chips button.on{background:#fff; color:#1D1D21; box-shadow:none;}
.ws[data-stage="busy"] .ws-set{opacity:.5; pointer-events:none;}

/* the action, and the way out */
.ws-go,.ws-done{margin-top:12px;}
.ws .btn-w.big,.ws .btn-o.big{width:100%; justify-content:center; box-sizing:border-box;}
.ws .btn-w.big{height:44px; font-size:14px; position:relative; overflow:hidden;}
.ws .btn-w.big span{position:relative;}
.ws .btn-w.big:disabled{opacity:1; background:rgba(255,255,255,.1); color:rgba(255,255,255,.55); cursor:default;}
.ws[data-stage="busy"] .btn-w.big::before{content:''; position:absolute; left:0; top:0; bottom:0; width:var(--p,0%); background:rgba(29,29,33,.14); transition:width .25s;}
.ws .btn-o.big{height:40px; font-size:13.5px; margin-top:6px; border-color:rgba(255,255,255,.18);}
.ws .prog{height:1px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:10px; display:none;}
.ws .prog.on{display:block;}
.ws .prog i{display:block; height:100%; width:0; background:rgba(255,255,255,.85); transition:width .3s;}
.ws-note{color:rgba(255,255,255,.42); font-size:12px; line-height:1.55; margin-top:8px;}
.ws .ws-pre{display:flex; height:auto; padding:6px 0 0; font-size:12px; color:rgba(255,255,255,.5); text-align:left; white-space:normal;}
.ws .ws-pre:hover{color:#fff;}
.ws-done-h{color:#fff; font-size:14px; font-weight:600; letter-spacing:0;}
.ws-done-p{color:rgba(255,255,255,.55); font-size:12.5px; margin:2px 0 10px; line-height:1.5; font-variant-numeric:tabular-nums;}
.ws-off{margin-top:14px; color:rgba(255,255,255,.35); font-size:11.5px;}
.ws-go.nudge{animation:wsin .25s ease both;}

/* ---- cards · a grid of frames ---- */
.ws .rgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(236px,100%),1fr)); gap:12px; margin-top:14px;}
.ws .rcard{background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); overflow:hidden; display:flex; flex-direction:column; position:relative; transition:box-shadow 160ms; animation:cardin .35s ease both;}
.ws .rcard:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);}
.ws .rcard.sel{box-shadow:inset 0 0 0 1.5px #fff;}
.ws .rcard .th{aspect-ratio:3/2; background:#141417; position:relative; display:grid; grid-template-rows:1fr; place-items:center; overflow:hidden;}
.ws .rcard .th canvas,.ws .rcard .th img{width:100%; height:100%; object-fit:contain; display:block;}
.ws .rcard .th .wait{color:rgba(255,255,255,.52); font-size:12px; font-weight:500;}
.ws .rcard .th > .spin + .wait{position:absolute; bottom:12px; left:0; right:0; text-align:center; margin:0;}
.ws .spin{width:22px; height:22px; border:2px solid rgba(255,255,255,.18); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; display:inline-block; box-sizing:border-box;}
.ws .rcard .badge{position:absolute; top:0; left:0; color:rgba(255,255,255,.7); background:rgba(23,23,26,.7); font-size:10.5px; font-weight:500; padding:4px 7px;}
.ws .rcard .bd{padding:12px 14px 14px;}
.ws .rcard .fn{color:#fff; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:default;}
.ws .rcard .fs{color:rgba(255,255,255,.5); font-size:11.5px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.45;}
.ws .rcard .row{display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap;}
.ws .rcard .mini{margin-left:auto; display:flex; gap:4px;}
.ws .saved{color:#8FD8AC;}
.ws .chip{color:rgba(255,255,255,.55); font-size:11.5px; font-weight:500; white-space:nowrap; letter-spacing:0; text-transform:none; border:0; padding:0; background:transparent; border-radius:0;}
.ws .chip.ok{color:rgba(255,255,255,.85);}
.ws .chip.blue{color:rgba(255,255,255,.8);}
.ws .chip.warn{color:rgba(255,255,255,.7);}
.ws .chip.err{color:#F0A0A0;}
.ws .ib{width:28px; height:28px; border-radius:0; border:1px solid rgba(255,255,255,.12); background:transparent; color:rgba(255,255,255,.7); display:grid; place-items:center; cursor:pointer; transition:border-color 140ms, background 140ms, color 140ms; padding:0;}
.ws .ib:hover:not(:disabled){border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.06); color:#fff;}
.ws .ib:disabled{opacity:.35; cursor:not-allowed;}
.ws .ib svg{width:13px; height:13px;}
.ws .ib.retry,.ws .ib.txt{width:auto; padding:0 10px; font-size:12px; font-weight:500; font-family:inherit;}

/* ---- rows · a list of files, for tools that never draw the picture ---- */
.ws .flist{margin-top:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); background:rgba(255,255,255,.02);}
.ws .frow{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:11px 14px; border-top:1px solid rgba(255,255,255,.07); animation:cardin .3s ease both;}
.ws .frow:first-child{border-top:0;}
.ws .frow.sel{box-shadow:inset 2px 0 0 #fff; background:rgba(255,255,255,.03);}
.ws .frow .fn{color:#fff; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:default;}
.ws .frow .fs{color:rgba(255,255,255,.45); font-size:11.5px; margin-top:2px; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ws .frow .mini{display:flex; gap:4px;}
.ws .frow .spin{width:14px; height:14px; border-width:1.5px; vertical-align:-2px; margin-right:6px;}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){ .ws-go,.ws-done,.ws-main,.ws .rcard,.ws .frow{animation:none;} }

/* ---- narrower desks ---- */
@media (max-width:1100px){ .ws-body{grid-template-columns:minmax(0,1fr) 280px;} }

/* ---- the phone · a docked action, options as a sheet, the files above ---- */
@media (max-width:860px){
  .ws{padding:26px 22px 28px;}
  .ws .ws-steps,.ws .ws-sub,.ws .ws-stephead,.ws .ws-foot,.ws .ws-off,.ws .ws-pre,.ws .fmts,.ws #folderBtn{display:none;}
  h1.ws-h1{font-size:22px !important; letter-spacing:-.6px !important;}
  .ws .drop{padding:28px 18px 24px; margin-top:22px; text-align:left; align-items:stretch;}
  .ws .drop .big{font-size:17px;}
  .ws .drop .row{flex-direction:row; flex-wrap:wrap; width:100%;}
  .ws .drop .row .btn-w{width:100%; height:48px; font-size:15px; justify-content:center;}
  .ws .drop .row .btn-o,.ws .drop .row .btn-g{width:auto; flex:1; height:42px; justify-content:center;}
  .ws-body{display:flex; flex-direction:column; align-items:stretch; gap:16px; margin-top:20px;}
  .ws-side{order:-1; position:static;}
  .ws-set{display:block; width:100%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); background:rgba(255,255,255,.03);}
  .ws-set summary{display:flex; width:100%; box-sizing:border-box; margin:0; padding:14px 16px; font-size:14px; font-weight:500; cursor:pointer;}
  .ws-set summary::after{content:attr(data-sum); color:rgba(255,255,255,.5); font-weight:400; font-size:13px; text-align:right; margin-left:12px;}
  .ws-set[open] summary::after{content:'Done';}
  .ws-side .panel{box-shadow:none; background:transparent; padding:0 16px 6px;}
  .ws-side .ir{grid-template-columns:88px 1fr; align-items:center; padding:12px 0;}
  .ws-side .ir .hint{display:none;}
  .ws-side .seg button{height:36px;}
  .ws-side select.sel,.ws-side input.sel{height:40px; font-size:14px;}
  .ws-side .chips button{height:36px;}
  /* the dock */
  .ws-go,.ws-done{position:fixed; left:0; right:0; bottom:0; z-index:30; margin:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(23,23,26,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,.1); animation:none;}
  .ws-go .btn-w.big{height:50px; font-size:15px;}
  .ws-note{margin-top:6px; font-size:12px; text-align:center;}
  .ws-err{margin-top:8px;}
  .ws-done{display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center;}
  .ws-done-h{display:none;}
  .ws-done-p{grid-column:1/-1; margin:0 0 2px; text-align:left;}
  .ws-done .btn-w.big{grid-column:1/-1; height:50px; font-size:15px;}
  .ws-done .btn-o.big{display:none;}
  .ws-done #sendKepla{display:inline-flex; grid-column:1; margin:0; height:40px; font-size:13.5px;}
  .ws-done #startOver{display:inline-flex; grid-column:2; padding:0 6px; height:40px; font-size:13px; white-space:nowrap;}
  .ws-done #retryFailed{grid-column:1/-1;}
  .ws-done .ws-note{display:none;}
  body.ws-docked{padding-bottom:112px;}
  .ws-bar{gap:0;}
  .ws-bar .btn-g{height:36px; padding:0 8px;}
  .ws-count{font-size:13px; width:100%;}
  .ws .rgrid{grid-template-columns:1fr 1fr; gap:10px;}
  .ws .rcard .bd{padding:10px 12px 12px;}
  .ws .rcard .fn{font-size:12.5px;}
  .ws .rcard .fs{display:none;}
  .ws .ib{width:36px; height:36px;}
  .ws .frow{gap:10px; padding:11px 12px;}
  .ws .frow .fs{font-size:11px;}
}
@media (pointer:coarse) and (max-width:860px){ #folderBtn{display:none;} }