/* picture.js: a picture alone on the board (mark up, crop), its tray, the pointer that is the pen's line, and the
   corner that sizes a selected card. Colours come from view.css. */

/* the picture's own buttons, first in the bar over it */
.selbar .pic-act{display:flex;align-items:center;gap:7px;padding:0 11px 0 8px}
.selbar .pic-act svg{flex:none;color:var(--pencil);transition:color .15s,transform .25s cubic-bezier(.23,1,.32,1)}
.selbar .pic-act:hover svg{color:var(--ink);transform:translateY(-1px)}

/* everything else steps back */
.card,.ink{transition:opacity .22s ease}
.zoom{transition:right .42s cubic-bezier(.16,1,.3,1),opacity .22s ease}
.dock{transition:left .42s cubic-bezier(.16,1,.3,1),opacity .22s ease}
body.focusing .card:not(.infocus){opacity:.16;pointer-events:none}
body.focusing .ink{opacity:.16}
body.focusing :is(.dock,.zoom,.minimap,.penbar,.selbar){opacity:0;pointer-events:none}
body.focusing :is(.adot,.world>.grip,.cbadge){display:none!important}
body[data-focus="markup"] .card.infocus{cursor:none;box-shadow:0 0 0 1.5px var(--ink),0 2px 4px var(--shadow-a),0 22px 60px var(--shadow-b)}
body[data-focus="markup"] .desk{user-select:none;-webkit-user-select:none}
body[data-focus="crop"] .card.infocus{visibility:hidden}

/* the tray under the picture */
.tray{position:fixed;z-index:12;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px;max-width:calc(100vw - 16px);box-sizing:border-box;padding:5px;
  background:var(--chrome);border:1px solid var(--chrome-edge);border-radius:15px;
  -webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);
  box-shadow:0 1px 2px var(--shadow-a),0 14px 40px var(--shadow-b);animation:tray-in .26s cubic-bezier(.23,1,.32,1)}
.tray[hidden]{display:none}
@keyframes tray-in{from{opacity:0;transform:translateY(-8px) scale(.97)}}
.tray button{border:0;background:none;height:36px;min-width:36px;border-radius:10px;cursor:pointer;color:var(--ink);display:grid;place-items:center;font:500 14px var(--sans)}
.tray button:hover{background:var(--hover)}
.tray .gap{width:1px;align-self:stretch;margin:7px 5px;background:var(--chrome-edge)}
/* inks: the one in the pen stands out of its well */
.tray .well i{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px var(--chrome-edge);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.tray .well:hover i{transform:scale(1.12)}
.tray .well.on i{transform:scale(1.25);box-shadow:0 0 0 2.5px var(--paper),0 0 0 4px var(--c)}
/* weights: each one is the line it draws, in the ink chosen */
.tray .line{width:44px}
.tray .line svg{opacity:.5;transition:opacity .15s}
.tray .line:hover svg,.tray .line.on svg{opacity:1}
.tray .line.on,.tray .ic.on,.tray .shape.on{background:var(--hover);box-shadow:inset 0 0 0 1px var(--chrome-edge)}
.tray .ic svg{color:var(--pencil)}
.tray .ic:hover svg,.tray .ic.on svg{color:var(--ink)}
.tray .shape{display:flex;gap:6px;padding:0 10px 0 8px;color:var(--pencil);white-space:nowrap;font-variant-numeric:tabular-nums}
.tray .shape:hover,.tray .shape.on{color:var(--ink)}
.tray .done{margin-left:6px;padding:0 15px;background:var(--ink);color:var(--paper);font-weight:600;transition:transform .15s cubic-bezier(.23,1,.32,1)}
.tray .done:hover{background:var(--ink);transform:scale(1.04)}
.tray .done:active{transform:scale(.97)}

/* the pointer over a picture being marked up */
.nib{position:fixed;z-index:13;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);background:var(--c);
  box-shadow:0 0 0 1px rgba(255,255,255,.95),0 0 0 2px rgba(0,0,0,.3)}
.nib[hidden]{display:none}
.nib.rub{background:rgba(255,255,255,.25)}

/* crop: the whole picture on the board, what is left out washed with the desk, a frame to move and size.
   --z is 1 / zoom, so the frame's line and corners keep their size on screen. */
.cropstage{--z:1;position:absolute;z-index:6;overflow:hidden;border-radius:calc(4px*var(--z));user-select:none;-webkit-user-select:none;touch-action:none;
  box-shadow:0 0 0 calc(.5px*var(--z)) var(--crease),0 22px 60px var(--shadow-b);animation:stage-in .3s ease}
@keyframes stage-in{from{opacity:.4}}
.cropstage img,.cropstage svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.cropframe{position:absolute;box-sizing:border-box;cursor:move;
  box-shadow:0 0 0 calc(1.5px*var(--z)) #fff,0 0 0 calc(2.5px*var(--z)) rgba(0,0,0,.28),0 0 0 9999px color-mix(in srgb,var(--desk) 64%,transparent)}
.cropstage.easing .cropframe{transition:left .28s cubic-bezier(.23,1,.32,1),top .28s cubic-bezier(.23,1,.32,1),width .28s cubic-bezier(.23,1,.32,1),height .28s cubic-bezier(.23,1,.32,1)}
/* thirds, only while the frame moves */
.cropframe i{position:absolute;background:rgba(255,255,255,.55);opacity:0;transition:opacity .18s}
.cropstage.dragging .cropframe i{opacity:1}
.cropframe .v1,.cropframe .v2{top:0;bottom:0;width:calc(1px*var(--z))}
.cropframe .h1,.cropframe .h2{left:0;right:0;height:calc(1px*var(--z))}
.cropframe .v1{left:33.333%}.cropframe .v2{left:66.667%}.cropframe .h1{top:33.333%}.cropframe .h2{top:66.667%}
/* corners and sides */
.cropframe b{position:absolute;box-sizing:border-box;width:calc(20px*var(--z));height:calc(20px*var(--z));border:0 solid #fff;filter:drop-shadow(0 0 calc(1px*var(--z)) rgba(0,0,0,.45))}
.cropframe b::before{content:"";position:absolute;inset:calc(-9px*var(--z))}
.cropframe b[data-h="nw"]{left:calc(-3px*var(--z));top:calc(-3px*var(--z));border-width:calc(4px*var(--z)) 0 0 calc(4px*var(--z));border-top-left-radius:calc(3px*var(--z));cursor:nwse-resize}
.cropframe b[data-h="ne"]{right:calc(-3px*var(--z));top:calc(-3px*var(--z));border-width:calc(4px*var(--z)) calc(4px*var(--z)) 0 0;border-top-right-radius:calc(3px*var(--z));cursor:nesw-resize}
.cropframe b[data-h="se"]{right:calc(-3px*var(--z));bottom:calc(-3px*var(--z));border-width:0 calc(4px*var(--z)) calc(4px*var(--z)) 0;border-bottom-right-radius:calc(3px*var(--z));cursor:nwse-resize}
.cropframe b[data-h="sw"]{left:calc(-3px*var(--z));bottom:calc(-3px*var(--z));border-width:0 0 calc(4px*var(--z)) calc(4px*var(--z));border-bottom-left-radius:calc(3px*var(--z));cursor:nesw-resize}
.cropframe b[data-h="n"],.cropframe b[data-h="s"]{left:50%;width:calc(26px*var(--z));height:calc(4px*var(--z));margin-left:calc(-13px*var(--z));background:#fff;border-radius:calc(2px*var(--z));cursor:ns-resize}
.cropframe b[data-h="e"],.cropframe b[data-h="w"]{top:50%;height:calc(26px*var(--z));width:calc(4px*var(--z));margin-top:calc(-13px*var(--z));background:#fff;border-radius:calc(2px*var(--z));cursor:ew-resize}
.cropframe b[data-h="n"]{top:calc(-3px*var(--z))}.cropframe b[data-h="s"]{bottom:calc(-3px*var(--z))}
.cropframe b[data-h="w"]{left:calc(-3px*var(--z))}.cropframe b[data-h="e"]{right:calc(-3px*var(--z))}
.cropstage.locked .cropframe b:is([data-h="n"],[data-h="s"],[data-h="e"],[data-h="w"]){display:none}
/* how many pixels are kept */
.cropsize{position:absolute;left:50%;bottom:calc(10px*var(--z));transform:translateX(-50%) scale(var(--z));transform-origin:50% 100%;padding:3px 8px;border-radius:7px;
  background:rgba(20,20,22,.72);color:#fff;font:600 11.5px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.cropsize:empty{display:none}

/* the corner of a selected card: pull it to make the card wider or narrower */
.world>.grip{position:absolute;z-index:5;width:22px;height:22px;margin:-15px 0 0 -15px;cursor:nwse-resize;touch-action:none}
.world>.grip::after{content:"";position:absolute;right:0;bottom:0;width:11px;height:11px;border:solid var(--cobalt);border-width:0 2.5px 2.5px 0;border-bottom-right-radius:9px;
  transition:width .18s cubic-bezier(.23,1,.32,1),height .18s cubic-bezier(.23,1,.32,1)}
.world>.grip:hover::after{width:15px;height:15px}

body.presenting :is(.tray,.nib,.world>.grip,.cropstage){display:none!important}
@media (prefers-reduced-motion:reduce){.tray,.cropstage{animation:none}.cropstage.easing .cropframe,.tray .well i{transition:none}}
/* a phone: the inks on one row, the pen's weights and the rest on the next */
@media (max-width:640px){.tray .gap:first-of-type{flex-basis:100%;height:0;margin:0;align-self:auto}}