/* tools/app.css — the application shell the file tools share: a landing with the
   drop zone, then the app over the screen (body.kapp-open): a strip with the
   lockup, the crumb, a live line and the actions; a tools row for the options;
   the queue on the left and the inspector on the right; a status bar with the
   keys. On a phone the queue is the screen and a tap opens the inspector.
   Loaded after frame.css. A tool adds its own rules under its own prefix. */
.ws.kapp-page{padding-top:26px;}
.kapp-hero{max-width:1480px; margin:0 auto;}
.kapp-hero .ws-h1{margin-top:10px; max-width:24ch;}
.kapp-lede{color:rgba(255,255,255,.62); font-size:16px; line-height:1.6; max-width:62ch; margin:14px 0 0;}
.kapp-lede b{color:#fff; font-weight:500;}
.ws.kapp-page .drop{margin-top:26px; padding:58px 32px 50px; border-style:dashed; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.02); display:flex;}
.ws.kapp-page .drop:hover,.ws.kapp-page .drop.on,.ws.kapp-page .drop:focus-visible{border-color:#fff; background:rgba(255,255,255,.04);}
.ws.kapp-page .drop .ico{width:44px; height:44px; border:1px solid rgba(255,255,255,.25); display:grid; place-items:center; margin-bottom:18px; color:#fff;}
.ws.kapp-page .drop .ico svg{width:20px; height:20px;}
.ws.kapp-page .drop .big{font-size:24px; letter-spacing:-.5px;}
.ws.kapp-page .drop .sub{font-size:14px; margin-top:8px;}
.ws.kapp-page .drop .row{margin-top:22px;}
.ws.kapp-page .drop .row .btn-w{height:46px; padding:0 22px; font-size:14.5px;}
.ws.kapp-page .drop .row .btn-o{height:46px; padding:0 18px; font-size:14px;}
.ws.kapp-page .drop .fmts{margin-top:22px;}
.ws.kapp-page:not([data-stage="empty"]) .drop{display:flex;}
.kapp-proof{display:flex; gap:28px; flex-wrap:wrap; margin-top:18px; color:rgba(255,255,255,.5); font-size:12.5px;}
.kapp-proof span b{color:rgba(255,255,255,.85); font-weight:500;}
/* the app */
.kapp{display:none;}
body.kapp-open{overflow:hidden;}
body.kapp-open .kapp{display:grid; position:fixed; inset:0; z-index:80; background:#17171A; grid-template-rows:auto auto minmax(0,1fr) auto; font-family:inherit;}
.kapp-strip{height:56px; display:flex; align-items:center; gap:14px; padding:0 18px 0 22px; border-bottom:1px solid rgba(255,255,255,.08); background:#17171A;}
.kapp-strip .kapp-lock img{height:22px; width:auto; display:block;}
.kapp-crumb{display:flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(255,255,255,.5); padding-left:14px; border-left:1px solid rgba(255,255,255,.14); height:20px;}
.kapp-crumb a{color:rgba(255,255,255,.5);} .kapp-crumb a:hover{color:#fff;} .kapp-crumb b{color:#fff; font-weight:500;}
.kapp-live{color:rgba(255,255,255,.5); font-size:12.5px; padding-left:14px; font-variant-numeric:tabular-nums;}
.kapp .sp{flex:1;}
.kapp-strip .btn-g{height:34px; padding:0 10px; font-size:13px;}
.kapp-strip .btn-o{height:36px; padding:0 14px; font-size:13px; border-radius:0;}
.kapp-strip .btn-w{height:36px; padding:0 16px; font-size:13px; border-radius:0;}
.kapp-strip .btn-w:disabled{opacity:.45; cursor:default;}
.kapp-x{width:36px; height:36px; border:1px solid rgba(255,255,255,.18); background:transparent; color:#fff; cursor:pointer; display:grid; place-items:center; margin-left:6px;}
.kapp-x svg{width:14px; height:14px;} .kapp-x:hover{border-color:rgba(255,255,255,.45);}
.kapp-tools{display:flex; align-items:center; gap:18px 30px; flex-wrap:wrap; padding:10px 22px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.015); min-height:54px; box-sizing:border-box;}
.kapp-opt{display:flex; align-items:center; gap:12px;}
.kapp-opt .fl{color:rgba(255,255,255,.5); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;}
.kapp-opt .seg{display:inline-flex; border:1px solid rgba(255,255,255,.18);}
.kapp-opt .seg button{height:32px; border:0; background:transparent; color:rgba(255,255,255,.62); padding:0 13px; font-size:12.5px; cursor:pointer; white-space:nowrap;}
.kapp-opt .seg button.on{background:#fff; color:#17171A; font-weight:600;}
.kapp-opt .seg button:disabled{opacity:.35; cursor:not-allowed;}
.kapp-opt .hint{color:rgba(255,255,255,.42); font-size:12px; max-width:40ch; line-height:1.4;}
.kapp-opt .sel{height:32px; border:1px solid rgba(255,255,255,.18); background:#17171A; color:#fff; font-size:12.5px; padding:0 10px; font-family:inherit;}
.kapp-opt .range{display:flex; align-items:center; gap:10px;}
.kapp-opt .range input[type=range]{width:140px; accent-color:#fff;}
.kapp-opt .range output{color:#fff; font-size:12.5px; min-width:2.4ch; font-variant-numeric:tabular-nums;}
.kapp-opt label.chk{display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:12.5px; cursor:pointer; white-space:nowrap;}
.kapp-opt label.chk input{accent-color:#fff; width:14px; height:14px; margin:0;}
.kapp-opt .chips{display:flex; flex-wrap:wrap; gap:6px;}
.kapp-opt .chips button{height:30px; border:1px solid rgba(255,255,255,.18); background:transparent; color:rgba(255,255,255,.65); padding:0 11px; font-size:12px; cursor:pointer; white-space:nowrap;}
.kapp-opt .chips button.on{background:#fff; color:#17171A; border-color:#fff; font-weight:600;}
.kapp-sum{display:flex; align-items:baseline; gap:10px; white-space:nowrap;}
.kapp-sum b{color:#fff; font-size:26px; font-weight:600; letter-spacing:-.9px; font-variant-numeric:tabular-nums; line-height:1;}
.kapp-sum span{color:rgba(255,255,255,.6); font-size:12.5px; font-variant-numeric:tabular-nums;}
.kapp-main{display:grid; grid-template-columns:minmax(360px,440px) minmax(0,1fr); min-height:0;}
/* the queue */
.kapp-queue{display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; border-right:1px solid rgba(255,255,255,.08);}
.kapp-qh{display:flex; align-items:center; gap:10px; padding:10px 14px 10px 22px; font-size:12.5px; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; border-bottom:1px solid rgba(255,255,255,.07);}
.kapp-qh .btn-g{height:30px; padding:0 8px; font-size:12.5px;}
.kapp-list{overflow:auto; overscroll-behavior:contain; outline:none;}
.kapp-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:11px 14px 11px 22px; border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer; position:relative; animation:cardin .3s ease both;}
.kapp-row:hover{background:rgba(255,255,255,.03);}
.kapp-row.sel{background:rgba(255,255,255,.05); box-shadow:inset 2px 0 0 #fff;}
.kapp-row .fn{grid-column:1; grid-row:1; color:#fff; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kapp-row .fs{grid-column:1; grid-row:2; color:rgba(255,255,255,.45); font-size:11.5px; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kapp-row .fs b{color:rgba(255,255,255,.8); font-weight:500;}
.kapp-row .fs .arr{margin:0 4px; color:rgba(255,255,255,.3);}
.kapp-row .chip{grid-column:2; grid-row:1 / span 2; align-self:center; justify-self:end; min-width:46px; text-align:center; color:rgba(255,255,255,.62); font-size:11.5px; font-weight:700; letter-spacing:.06em; border:1px solid rgba(255,255,255,.14); padding:6px 8px; white-space:nowrap; font-variant-numeric:tabular-nums;}
.kapp-row .chip.ok{color:#fff; border-color:rgba(255,255,255,.38); background:rgba(255,255,255,.07);}
.kapp-row .chip.warn{border-style:dashed;}
.kapp-row .chip.bad{color:#F0A0A0; border-color:rgba(240,160,160,.4);}
.kapp-row .chip.busy{color:rgba(255,255,255,.7);}
.kapp-row .th{grid-column:1 / -1; grid-row:3; margin-top:6px; display:flex; gap:6px; flex-wrap:wrap;}
.kapp-row .th img,.kapp-row .th canvas{height:44px; width:auto; display:block; background:#111; border:1px solid rgba(255,255,255,.08);}
.kapp-track{grid-column:1 / -1; height:4px; background:rgba(255,255,255,.08); position:relative; overflow:hidden; margin-top:4px;}
.kapp-track i{position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(255,255,255,.35); transition:width .35s ease;}
.kapp-track.busy i{width:40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:kappscan 1.1s linear infinite;}
.kapp-track.done i{background:#fff;}
.kapp-track.kept i{width:100%; background:rgba(255,255,255,.18);}
.kapp-track.bad i{width:100%; background:rgba(240,138,126,.5);}
@keyframes kappscan{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.kapp-row .rm{position:absolute; right:10px; top:8px; width:24px; height:24px; border:0; background:transparent; color:rgba(255,255,255,.4); display:none; place-items:center; cursor:pointer;}
.kapp-row .rm svg{width:11px; height:11px;} .kapp-row:hover .rm,.kapp-row.sel .rm{display:grid;} .kapp-row .rm:hover{color:#fff;}
.kapp-row.sel .chip,.kapp-row:hover .chip{margin-right:26px;}
.kapp-qf{padding:10px 22px; font-size:12px; color:rgba(255,255,255,.45); border-top:1px solid rgba(255,255,255,.07); min-height:38px; box-sizing:border-box;}
/* the inspector */
.kapp-insp{display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; min-width:0;}
.kapp-insp-top{height:46px; display:flex; align-items:center; gap:12px; padding:0 18px; border-bottom:1px solid rgba(255,255,255,.07);}
.kapp-insp-top .nm{color:#fff; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.kapp-back{display:none; width:32px; height:32px; border:1px solid rgba(255,255,255,.18); background:transparent; color:#fff; place-items:center; cursor:pointer;}
.kapp-back svg{width:14px; height:14px;}
.kapp-insp-top .seg{display:inline-flex; border:1px solid rgba(255,255,255,.18);}
.kapp-insp-top .seg button{height:30px; border:0; background:transparent; color:rgba(255,255,255,.62); padding:0 12px; font-size:12.5px; cursor:pointer;}
.kapp-insp-top .seg button.on{background:rgba(255,255,255,.12); color:#fff;}
.kapp-stage{overflow:auto; position:relative; display:grid; place-items:center; padding:18px; background:#131316; min-height:0;}
.kapp-stage.one{display:block; padding:0;}
.kapp-stage.doc{display:block; place-items:unset; padding:22px 26px; background:#17171A;}
.kapp-media{position:relative; display:inline-block; line-height:0; user-select:none; -webkit-user-select:none;}
.kapp-media[hidden]{display:none;}
.kapp-media img,.kapp-media canvas{display:block; max-width:100%; height:auto;}
.kapp-stage:not(.one) .kapp-media img,.kapp-stage:not(.one) .kapp-media canvas{max-height:calc(100vh - 56px - 54px - 46px - 150px - 32px); width:auto; max-width:100%;}
.kapp-stage.one .kapp-media img,.kapp-stage.one .kapp-media canvas{max-width:none; max-height:none;}
.kapp-media.cmp{touch-action:none;}
.kapp-media img.b{position:absolute; left:0; top:0; clip-path:inset(0 0 0 50%);}
.kapp-media .div{position:absolute; top:0; bottom:0; left:50%; width:1px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.4); pointer-events:none;}
.kapp-media .div i{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:#fff; color:#17171A; display:grid; place-items:center; font-size:12px; font-weight:700; font-style:normal;}
.kapp-media .tag{position:absolute; top:12px; padding:5px 8px; background:rgba(23,23,26,.78); color:#fff; font-size:11px; font-weight:700; letter-spacing:.12em; pointer-events:none;}
.kapp-media .tag.l{left:12px;} .kapp-media .tag.r{right:12px;}
.kapp-empty{color:rgba(255,255,255,.4); font-size:13.5px; text-align:center; max-width:30ch; line-height:1.5;}
.kapp-det{border-top:1px solid rgba(255,255,255,.07); padding:14px 18px 16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 24px; min-height:120px; box-sizing:border-box; align-content:start;}
.kapp-det .k{color:rgba(255,255,255,.45); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;}
.kapp-det .v{color:#fff; font-size:14px; margin-top:5px; font-variant-numeric:tabular-nums; line-height:1.4; overflow-wrap:anywhere;}
.kapp-det .v small{color:rgba(255,255,255,.5); font-size:12px;}
.kapp-det .v.big{font-size:22px; font-weight:600; letter-spacing:-.6px;}
.kapp-det .acts{grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:2px;}
.kapp-det .acts .btn-o{height:34px; padding:0 14px; font-size:13px; border-radius:0;}
.kapp-det .acts .btn-w{height:34px; padding:0 14px; font-size:13px; border-radius:0;}
.kapp-det .acts .seg{display:inline-flex; border:1px solid rgba(255,255,255,.18);}
.kapp-det .acts .seg button{height:32px; border:0; background:transparent; color:rgba(255,255,255,.62); padding:0 12px; font-size:12.5px; cursor:pointer;}
.kapp-det .acts .seg button.on{background:rgba(255,255,255,.12); color:#fff;}
.kapp-det .acts .lbl{color:rgba(255,255,255,.45); font-size:12px; margin-left:auto;}
.kapp-det .acts .lbl + .seg{margin-left:8px;}
/* a report in the inspector (the cleaners, the viewer) */
.kapp-rep{max-width:760px;}
.kapp-rep h3{margin:0 0 10px; color:#fff; font-size:15px; font-weight:600;}
.kapp-rep table{width:100%; border-collapse:collapse; font-size:13px;}
.kapp-rep td{padding:7px 0; border-top:1px solid rgba(255,255,255,.07); vertical-align:top; line-height:1.45;}
.kapp-rep td:first-child{color:rgba(255,255,255,.5); width:34%; padding-right:14px;}
.kapp-rep td{color:#fff; overflow-wrap:anywhere;}
.kapp-rep .sec{margin-top:22px;}
.kapp-rep .note{color:rgba(255,255,255,.5); font-size:12.5px; line-height:1.5; margin-top:10px;}
.kapp-rep a{color:#fff; text-decoration:underline; text-underline-offset:3px;}
/* the status bar */
.kapp-status{height:32px; display:flex; align-items:center; gap:14px; padding:0 22px; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.45); font-size:11.5px; font-variant-numeric:tabular-nums;}
.kapp-status .keys{display:flex; gap:10px; align-items:center;}
.kapp-status kbd{font-family:inherit; font-size:10.5px; color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.2); padding:1px 5px; margin-right:3px;}
.ws.kapp-page .ws-off{display:none;}
@media (max-width:1100px){ .kapp-main{grid-template-columns:minmax(300px,360px) minmax(0,1fr);} .kapp-opt .hint{display:none;} .kapp-strip .btn-o{display:none;} }
@media (max-width:860px){
  .ws.kapp-page .drop{padding:40px 20px 34px;}
  .ws.kapp-page .drop .big{font-size:20px;}
  .kapp-strip{height:52px; padding:0 12px 0 16px; gap:8px;}
  .kapp-crumb,.kapp-live,.kapp-strip .btn-g{display:none;}
  .kapp-tools{padding:8px 12px; gap:10px 16px;}
  .kapp-sum{width:100%;} .kapp-sum b{font-size:22px;}
  .kapp-main{grid-template-columns:1fr;}
  .kapp-queue{border-right:0;}
  .kapp-insp{display:none;}
  .kapp.insp .kapp-queue{display:none;} .kapp.insp .kapp-insp{display:grid;}
  .kapp-back{display:grid;}
  .kapp-row{padding-left:16px;}
  .kapp-row .rm{display:grid;}
  .kapp-row .chip{margin-right:26px;}
  .kapp-stage:not(.one) .kapp-media img,.kapp-stage:not(.one) .kapp-media canvas{max-height:calc(100vh - 52px - 95px - 46px - 140px - 32px);}
  .kapp-stage.doc{padding:16px;}
  .kapp-status .keys{display:none;}
  .kapp-det{grid-template-columns:1fr 1fr; gap:10px 16px; padding:12px 16px;}
}