/* صانع الألوان — /palette/. The GIF tool's family: a quiet stage on tile, a paper panel, ink controls, soft corners
   (garden.css zeroes corners at zero specificity, so every corner here carries !important). The only colour on the
   page is the palette itself. */
.palette-page{--pl-seg-on:var(--paper,#fff);--pl-stage-h:clamp(300px,calc(100vh - 330px),680px)}
.pl{width:100%;max-width:1320px;margin:0 auto;padding:14px 24px 48px;box-sizing:border-box}
.pl *,.pl *::before,.pl *::after{box-sizing:border-box}
.pl [hidden]{display:none!important}
.pl svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(.pl) button{font-family:var(--font);color:inherit;-webkit-tap-highlight-color:transparent}
.pl :is(button,input,a,[tabindex],label):focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pl .vh,.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html[data-look="garden"] .pl :is(.pl-ico,.pl-spin,.pl-ring,.pl-basecol,.pl-picked-c,.pl-picked-to button,.pl-loupe,.pl-wheel,.pl-wheel-bg){border-radius:50%!important}
html[data-look="garden"] .pl :is(.pl-pill,.pl-feats li,.pl-privacy,.pl-chipbtn,.pl-ctr,.pl-copied,.pl-loupe b,.pl-toast,.pl-armed){border-radius:999px!important}
html[data-look="garden"] .pl :is(.pl-drop,.pl-stage,.pl-panel,.pl-dlg,.pl-res-img,.pl-dragover > div,.pl-harm button,.pl-gen,.pl-picked){border-radius:var(--r-card)!important}
html[data-look="garden"] .pl :is(.pl-seg,.pl-hexin,.pl-strip,.pl-err,.pl-opening,.pl-tip){border-radius:8px!important}
html[data-look="garden"] .pl :is(.pl-seg button,.pl-hex,.pl-code){border-radius:6px!important}

/* ---------- head ---------- */
.pl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 12px;min-height:48px}
.pl-title{display:flex;align-items:center;gap:6px;min-width:0}
.pl-title-t{min-width:0}
.pl-title h1{margin:0;font:700 26px/1.2 var(--font);color:var(--ink)}
.pl-safe{display:flex;align-items:center;gap:5px;margin:2px 0 0;font:400 13px/1.4 var(--font);color:var(--ink-3)}
.pl-safe svg{width:14px;height:14px;flex:none}
.pl-headacts{display:flex;align-items:center;gap:2px;flex:none}
.pl[data-state="empty"] :is(#plUndo,#plRedo){display:none}
.pl-ico{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;text-decoration:none;transition:background-color var(--d1)}
.pl-ico svg{width:21px;height:21px}
.pl-ico.sm{width:44px;height:44px}.pl-ico.sm svg{width:19px;height:19px}
.pl-ico:hover:not(:disabled){background:var(--tile-2)}
.pl-ico:disabled{opacity:.32;cursor:default}
.pl-pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);font:500 14px var(--font);cursor:pointer;white-space:nowrap;transition:border-color var(--d1)}
.pl-pill svg{width:18px;height:18px}
.pl-pill:hover{border-color:var(--ink)}

/* ---------- the two ways in ---------- */
.pl-modebar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.pl-seg{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:3px;padding:3px;background:var(--tile-2)}
.pl-seg button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 14px;border:0;background:none;font:500 14.5px var(--font);font-variant-numeric:tabular-nums;color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:background-color var(--d1),color var(--d1)}
.pl-seg button svg{width:19px;height:19px}
.pl-seg button:hover{color:var(--ink)}
.pl-seg button[aria-checked="true"]{background:var(--pl-seg-on);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(15,20,25,.12)}
.pl-modes{--n:2;min-width:340px}
.pl-modes button{min-height:44px}

/* ---------- the empty state: drop a picture ---------- */
.pl-drop{position:relative;display:grid;place-items:center;min-height:min(66vh,620px);padding:40px 20px;border:1.5px dashed var(--line-2);background:var(--tile);text-align:center;cursor:pointer;transition:border-color var(--d1)}
.pl-drop:hover{border-color:var(--ink-3)}
.pl-drop-in{display:flex;flex-direction:column;align-items:center;max-width:580px;cursor:default}
.pl-drop-art{width:min(250px,66vw);color:var(--ink);cursor:pointer}
.pl-drop-art .mood{width:100%;height:auto;display:block;overflow:visible}
.pl-drop-art .mood .fan > g{transform-box:view-box;transition:transform .5s var(--ease-spring)}
.pl-drop:hover .pl-drop-art .mood .fan > g:nth-child(1){transform:rotate(-5deg)}
.pl-drop:hover .pl-drop-art .mood .fan > g:nth-child(2){transform:rotate(-2.5deg)}
.pl-drop:hover .pl-drop-art .mood .fan > g:nth-child(4){transform:rotate(2.5deg)}
.pl-drop:hover .pl-drop-art .mood .fan > g:nth-child(5){transform:rotate(5deg)}
.pl-drop h2{margin:18px 0 8px;font:700 clamp(22px,3.2vw,30px)/1.3 var(--font);color:var(--ink)}
.pl-drop-sub{margin:0 0 20px;font:400 16px/1.7 var(--font);color:var(--ink-2)}
html[data-look] .pl kbd{font-family:var(--font)!important;letter-spacing:0;display:inline-block;padding:1px 7px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--paper);font:500 12.5px/1.6 var(--font);color:var(--ink)}
.pl-big{min-height:52px!important;padding:0 28px!important;font:700 17px var(--font)!important}
.pl-big svg{width:22px;height:22px}
.pl-drop-kinds{margin:16px 0 0;max-width:46ch;font:400 14px/1.7 var(--font);color:var(--ink-3)}
.pl-feats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.pl-feats li{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line);background:var(--paper);font:500 13.5px var(--font);color:var(--ink-2)}
.pl-feats svg{width:17px;height:17px;color:var(--ink)}
.pl-privacy{display:inline-flex;align-items:center;gap:7px;margin:20px 0 0;padding:8px 14px;background:var(--paper);border:1px solid var(--line);font:500 13.5px/1.5 var(--font);color:var(--ink);text-align:start}
.pl-privacy svg{width:16px;height:16px;flex:none}
.pl-tocolor{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:10px;padding:0 6px;border:0;background:none;font:600 14.5px var(--font);color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:5px;cursor:pointer}
.pl-tocolor:hover{text-decoration-color:var(--ink)}
.pl-tocolor i{font-style:normal}
.pl-opening{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:color-mix(in srgb,var(--tile) 90%,transparent);font:500 15px var(--font);color:var(--ink)}
.pl-err{position:absolute;inset-inline:16px;bottom:16px;margin:0;padding:12px 14px;background:color-mix(in srgb,var(--danger) 12%,var(--paper));color:var(--ink);font:500 14px/1.6 var(--font)}
.pl-spin{display:inline-block;width:22px;height:22px;flex:none;border:2.5px solid var(--line-2);border-top-color:var(--ink);animation:plSpin .8s linear infinite}
@keyframes plSpin{to{transform:rotate(360deg)}}

/* ---------- the work area ---------- */
.pl-work{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:22px;align-items:start}
.pl-src{min-width:0;display:flex;flex-direction:column;gap:12px}

/* the picture */
.pl-stage{position:relative;display:grid;place-items:center;min-height:240px;padding:18px;background:var(--tile-2);overflow:hidden;user-select:none;-webkit-user-select:none}
.pl-imgbox{position:relative;display:block;width:min(100%,calc((var(--pl-stage-h) - 36px) * var(--arn,1.333)));aspect-ratio:var(--ar,4/3);cursor:crosshair;touch-action:manipulation}
.pl-imgbox img{display:block;width:100%;height:100%;object-fit:fill;box-shadow:0 10px 30px -18px rgba(0,0,0,.45);-webkit-user-drag:none;pointer-events:none}
html[data-look="garden"] .pl .pl-imgbox img{border-radius:4px!important}
.pl.pl-arming .pl-imgbox{touch-action:none}
.pl.pl-arming .pl-ring{pointer-events:none;opacity:.55}
.pl.pl-arming .pl-stage{box-shadow:inset 0 0 0 2px var(--ink)}
.pl-rings{position:absolute;inset:0;pointer-events:none}
.pl-ring{position:absolute;display:grid;place-items:center;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:3px solid #fff;background:var(--c);box-shadow:0 1px 6px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.12);cursor:grab;pointer-events:auto;touch-action:none;transition:transform var(--d1) var(--ease)}
.pl-ring::before{content:"";position:absolute;inset:-8px;border-radius:50%}
.pl-ring span{font:700 11px/1 var(--font);color:#fff;text-shadow:0 0 3px rgba(0,0,0,.75);opacity:0;transition:opacity var(--d1)}
.pl-ring:hover,.pl-ring:focus-visible,.pl-ring.drag{transform:scale(1.25);z-index:2}
.pl-ring:hover span,.pl-ring:focus-visible span{opacity:1}
.pl-ring.drag{cursor:grabbing}
.pl-ring:focus-visible{outline:2px solid var(--ink)!important;outline-offset:3px}
.pl-ring.armed{animation:plPulse 1.1s ease-in-out infinite}
@keyframes plPulse{50%{transform:scale(1.3)}}
.pl-loupe{position:absolute;z-index:4;width:132px;height:132px;margin:-160px 0 0 -66px;border:4px solid var(--c,#fff);background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 10px 26px -8px rgba(0,0,0,.5);pointer-events:none;overflow:visible}
.pl-loupe.below{margin-top:28px}
.pl-loupe.touch{margin-top:-190px}
.pl-loupe.touch.below{margin-top:60px}
.pl-loupe canvas{display:block;width:100%;height:100%;border-radius:50%;image-rendering:pixelated}
.pl-loupe b{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);padding:3px 9px;background:rgba(10,12,14,.82);color:#fff;font:600 12.5px/1.3 var(--font);white-space:nowrap;letter-spacing:.02em}
.pl-armed{position:absolute;top:12px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);margin:0;padding:7px 14px;background:rgba(10,12,14,.82);color:#fff;font:500 13.5px/1.5 var(--font);text-align:center;pointer-events:none;z-index:5;animation:plIn .2s var(--ease)}
@keyframes plIn{from{opacity:0;transform:translate(-50%,-4px)}}

/* the colour you clicked */
.pl-picked{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:8px 8px 8px 12px;border:1px solid var(--line-2);background:var(--paper);animation:plUp .22s var(--ease)}
@keyframes plUp{from{opacity:0;transform:translateY(-4px)}}
.pl-picked-c{width:34px;height:34px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pl-picked-hex{min-height:44px;padding:0 10px;border:0;background:none;font:700 16px var(--font);letter-spacing:.02em;color:var(--ink);cursor:pointer;text-decoration:underline dotted var(--line-2);text-underline-offset:5px}
.pl-picked-hex:hover{text-decoration-color:var(--ink)}
.pl-picked-t{font:500 13.5px var(--font);color:var(--ink-3);margin-inline-start:auto}
.pl-picked-to{display:flex;flex-wrap:wrap;gap:4px}
.pl-picked-to button{position:relative;display:grid;place-items:center;width:30px;height:30px;margin:7px 3px;padding:0;border:0;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);cursor:pointer;transition:transform var(--d1)}
.pl-picked-to button::before{content:"";position:absolute;inset:-7px -3px}
.pl-picked-to button span{font:700 12px/1 var(--font);color:var(--on)}
.pl-picked-to button:hover{transform:scale(1.12)}

/* the strip: the palette as one bar, each colour as wide as its share of the picture */
.pl-strip{display:flex;height:38px;overflow:hidden;background:var(--tile-2)}
.pl-strip i{display:block;min-width:6px;flex-basis:0;transition:flex-grow .35s var(--ease)}

/* ---------- from one colour ---------- */
.pl-gen{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);align-items:center;gap:28px;min-height:var(--pl-stage-h);padding:28px;background:var(--tile)}
.pl-wheel{position:relative;width:100%;aspect-ratio:1;justify-self:center;cursor:crosshair;touch-action:none}
.pl-wheel:focus-visible{outline-offset:6px}
.pl-wheel-bg{position:absolute;inset:4%;display:block;background:radial-gradient(circle closest-side,#fff 8%,rgba(255,255,255,0) 100%),conic-gradient(hsl(0 80% 56%),hsl(30 85% 56%),hsl(60 80% 52%),hsl(90 60% 50%),hsl(120 55% 46%),hsl(160 55% 44%),hsl(190 65% 48%),hsl(220 70% 56%),hsl(260 60% 60%),hsl(300 55% 56%),hsl(330 70% 56%),hsl(360 80% 56%));box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 14px 30px -20px rgba(0,0,0,.45);opacity:.92}
.pl-dots{position:absolute;inset:0}
.pl-dots svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.pl-dots line{stroke:#fff;stroke-width:1.4;opacity:.85}
.pl-dots circle{stroke:#fff;stroke-width:2.6}
.pl-dots circle.base{stroke-width:3.4}
.pl-genctl{display:flex;flex-direction:column;gap:20px;min-width:0}
.pl-group h3{margin:0 0 10px;font:700 14.5px/1.4 var(--font);color:var(--ink)}
.pl-base{display:flex;align-items:center;gap:10px}
.pl-basecol{position:relative;display:block;width:52px;height:52px;flex:none;background:var(--c,#5E7F99);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--line-2);cursor:pointer;overflow:hidden}
.pl-basecol input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.pl-basecol:focus-within{outline:2px solid var(--ink);outline-offset:5px}
.pl-hexin{width:140px;min-height:48px;padding:0 12px;border:1px solid var(--line-2);background:var(--field);color:var(--ink);font:700 17px var(--font);letter-spacing:.03em;text-transform:uppercase}
.pl-hexin:focus{border-color:var(--ink);outline:none}
.pl-hexin.bad{border-color:var(--danger)}
.pl-harm{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pl-harm button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:62px;padding:10px 12px;border:1px solid var(--line-2);background:var(--paper);text-align:start;cursor:pointer;transition:border-color var(--d1),box-shadow var(--d1)}
.pl-harm b{font:700 14.5px/1.3 var(--font);color:var(--ink)}
.pl-harm small{font:400 12.5px/1.45 var(--font);color:var(--ink-3)}
.pl-harm button:hover{border-color:var(--ink-3)}
.pl-harm button[aria-checked="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}

/* ---------- the palette panel ---------- */
.pl-panel{position:sticky;top:82px;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--paper)}
.pl-phead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 0}
.pl-phead h2{margin:0;font:700 19px/1.3 var(--font);color:var(--ink)}
.pl-count{--n:6;flex:none}
.pl-count button{min-width:38px;min-height:38px;padding:0 4px;font-weight:600}
.pl-count button::before{content:"";position:absolute;inset:-3px 0}
.pl-count button{position:relative}
.pl-tip{margin:12px 18px 4px;padding:8px 12px;background:var(--tile);font:400 13px/1.6 var(--font);color:var(--ink-3)}
/* the swatches: cards two by two when the panel is narrow (phones, tablets), one row each when it's wide */
.pl-panel{container-type:inline-size;container-name:plpanel}
.pl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:12px 12px 6px;list-style:none}
.pl-sw{position:relative;display:flex;flex-direction:column;gap:7px;min-width:0;padding:0 0 8px;border:1px solid var(--line);background:var(--paper);transition:background-color var(--d1),border-color var(--d1)}
html[data-look="garden"] .pl .pl-sw{border-radius:12px!important}
.pl-sw.locked{border-color:var(--line-2)}
.pl-sw.flash::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:color-mix(in srgb,var(--c) 32%,transparent);pointer-events:none;animation:plFlash 1s var(--ease) forwards}
@keyframes plFlash{to{opacity:0}}
.pl-chip{position:relative;display:flex;align-items:flex-end;justify-content:space-between;width:100%;height:96px;padding:8px 10px;border:0;background:var(--c);color:var(--on);cursor:copy;box-shadow:inset 0 -1px 0 rgba(0,0,0,.06);transition:filter var(--d1)}
html[data-look="garden"] .pl .pl-chip{border-radius:11px 11px 0 0!important}
.pl-sw.light .pl-chip{box-shadow:inset 0 -1px 0 var(--line)}
.pl-chip:hover{filter:brightness(1.04) saturate(1.04)}
.pl-chip:active{filter:brightness(.96)}
.pl-chip:focus-visible{outline-offset:-4px!important;outline-color:var(--on)!important}
.pl-aa{font:700 19px/1 var(--font)}
.pl-num{font:600 11.5px/1 var(--font);opacity:.72}
.pl-info{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 8px}
.pl-l1{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.pl-hex{position:relative;min-height:34px;padding:0 6px;margin-inline-start:-6px;border:0;background:none;font:700 17px/1 var(--font);letter-spacing:.03em;color:var(--ink);cursor:copy;font-variant-numeric:tabular-nums}
.pl-hex::before,.pl-code::before{content:"";position:absolute;inset:-5px 0}
.pl-hex:hover,.pl-code:hover{background:var(--tile-2)}
.pl-ctr{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 8px 0 9px;background:var(--tile-2);font:500 12px/1 var(--font);color:var(--ink-2);white-space:nowrap;max-width:100%}
.pl-ctr i{width:10px;height:10px;flex:none;border-radius:50%!important;background:var(--on);box-shadow:0 0 0 1.5px var(--c),0 0 0 2.5px var(--line-2)}
.pl-ctr b{font:600 12px var(--font);font-variant-numeric:tabular-nums;color:var(--ink)}
.pl-ctr em{font-style:normal;font-weight:700;color:#2E7D4F}
.pl-ctr[data-g="AA+"] em{color:#8A6A10}
.pl-ctr[data-g="no"] em{color:var(--danger)}
.pl-l2{display:flex;flex-direction:column;align-items:flex-start;margin-top:4px;margin-inline-start:-6px}
.pl-code{position:relative;min-height:30px;padding:0 6px;border:0;background:none;font:400 12.5px/1 var(--font);color:var(--ink-3);cursor:copy;white-space:nowrap;font-variant-numeric:tabular-nums}
.pl-code:hover{color:var(--ink)}
/* lock + pick sit on the colour's top corner, on a soft round of paper */
.pl-swacts{position:absolute;top:0;inset-inline-end:0;display:flex;gap:0}
.pl-swacts .pl-ico{color:var(--ink);background:radial-gradient(circle,color-mix(in srgb,var(--paper) 86%,transparent) 0 15px,transparent 15.5px)!important}
.pl-swacts .pl-ico svg{width:17px;height:17px}
.pl-swacts .pl-ico[aria-pressed="true"]{color:var(--bg);background:radial-gradient(circle,var(--ink) 0 15px,transparent 15.5px)!important}
.pl-sw:not(.locked):not(:hover):not(:focus-within) .pl-lockbtn{opacity:.8}
.pl-sw.armed{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pl-editbtn{position:relative;overflow:hidden}
.pl-editbtn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.pl-editbtn:focus-within{outline:2px solid var(--ink);outline-offset:-2px}
.pl-copied{position:absolute;top:60px;left:50%;transform:translate(-50%,-50%) scale(.9);padding:5px 12px;background:var(--ink);color:var(--bg);font:600 13px/1.3 var(--font);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s var(--ease-spring);z-index:2;white-space:nowrap}
.pl-copied.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

@container plpanel (min-width:440px){
  .pl-list{display:block;padding:8px 10px 4px}
  .pl-sw{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 6px 7px 4px;border-color:transparent;background:transparent}
  .pl-sw + .pl-sw{margin-top:2px}
  .pl-sw:hover{background:var(--tile)}
  .pl-sw.locked{border-color:transparent}
  .pl-chip{width:62px;height:62px;padding:6px 8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
  html[data-look="garden"] .pl .pl-chip{border-radius:10px!important}
  .pl-sw.light .pl-chip{box-shadow:inset 0 0 0 1px var(--line-2)}
  .pl-info{padding:0}
  .pl-l1{flex-direction:row;align-items:center;flex-wrap:wrap;gap:2px 8px}
  .pl-l2{flex-direction:row;flex-wrap:wrap;margin-top:0}
  .pl-swacts{position:static}
  .pl-swacts .pl-ico{width:40px;color:var(--ink-3);background:none!important}
  .pl-swacts .pl-ico:hover{color:var(--ink);background:var(--tile-2)!important}
  .pl-swacts .pl-ico[aria-pressed="true"]{color:var(--ink);background:var(--tile-2)!important}
  .pl-sw.armed .pl-pickbtn{background:var(--ink)!important;color:var(--bg)!important}
  .pl-sw.armed{box-shadow:inset 0 0 0 1.5px var(--ink)}
  .pl-sw.locked .pl-chip::after{content:"";position:absolute;top:6px;inset-inline-end:6px;width:7px;height:7px;border-radius:50%;background:var(--on);opacity:.85}
  .pl-copied{top:50%;left:auto;inset-inline-start:34px;transform:translate(50%,-50%) scale(.9)}
  .pl-copied.on{transform:translate(50%,-50%) scale(1)}
}
.pl-copyall{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:6px 18px 0;padding:10px 0 4px;border-top:1px solid var(--line);font:500 13px var(--font);color:var(--ink-3)}
.pl-chipbtn{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line-2);background:var(--paper);font:500 13.5px var(--font);color:var(--ink);cursor:copy;transition:border-color var(--d1)}
.pl-chipbtn::before{content:"";position:absolute;inset:-4px 0}
.pl-chipbtn svg{width:16px;height:16px}
.pl-chipbtn:hover{border-color:var(--ink)}
.pl-acts{display:grid;grid-template-columns:1fr 1.2fr;gap:8px;padding:12px 18px 16px}
.pl-acts .g-btn{min-height:50px;font-weight:600}
.pl-acts svg{width:20px;height:20px}
.pl-save{font-weight:700!important}
.pl-save[aria-busy="true"]{opacity:.6;cursor:progress}

.pl-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:70;transform:translateX(-50%);padding:9px 18px;background:var(--ink);color:var(--bg);font:600 14px/1.4 var(--font);box-shadow:0 10px 24px -10px rgba(0,0,0,.5);pointer-events:none;opacity:0}
.pl-toast.on{animation:plToast 1.6s var(--ease) forwards}
@keyframes plToast{0%{opacity:0;transform:translate(-50%,8px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

/* ---------- dialogs ---------- */
.pl-dlg{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px -30px rgba(0,0,0,.55);overflow:auto}
.pl-dlg::backdrop{background:rgba(10,12,14,.5)}
.pl-dlg[open]{animation:plPop .26s var(--ease)}
@keyframes plPop{from{opacity:0;transform:translateY(14px) scale(.98)}}
.pl-dlg-in{padding:16px 20px 18px}
.pl-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.pl-dlg-head h2{margin:0;font:700 22px/1.3 var(--font)}
.pl-dlg .g-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pl-res-img{display:grid;place-items:center;padding:12px;background:var(--tile-2)}
.pl-res-img img{display:block;max-width:100%;max-height:min(58vh,560px);width:auto;height:auto;box-shadow:0 8px 24px -14px rgba(0,0,0,.4)}
.pl-res-acts{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px}
.pl-res-acts:has(#plShare:not([hidden])){grid-template-columns:1.3fr 1fr}
.pl-res-acts .g-btn{min-height:50px}
.pl-res-acts svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pl-dlg-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 0;font:400 12.5px/1.5 var(--font);color:var(--ink-3);text-align:center}
.pl-dlg-note svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.pl-helpdlg{width:min(520px,calc(100vw - 32px))}
.pl-steps{margin:0 0 6px;padding:0 20px 0 0;font:400 15px/1.75 var(--font);color:var(--ink-2)}
.pl-steps li{margin:0 0 6px}
.pl-steps b{color:var(--ink)}
.pl-keys-h{margin:16px 0 8px;font:700 15px var(--font)}
.pl-keys{margin:0;display:grid;gap:2px}
.pl-keys div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;border-bottom:1px solid var(--line)}
.pl-keys dt{flex:none}.pl-keys dd{margin:0;font:400 14px var(--font);color:var(--ink-2);text-align:end}
.pl-dragover{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
.pl-dragover > div{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 64px;border:2px dashed var(--ink);background:var(--paper);font:700 20px var(--font);color:var(--ink)}
.pl-dragover svg{width:42px;height:42px}

/* ---------- narrower screens ---------- */
@media (max-width:999px){
  .pl{padding:10px 16px 32px}
  .pl-gen{grid-template-columns:1fr;justify-items:stretch;gap:22px;min-height:0;padding:22px}
  .pl-wheel{max-width:300px}
}
/* tablets, and phones turned sideways: still two columns, the picture beside the list */
@media (min-width:760px) and (max-width:999px){
  .pl-work{grid-template-columns:minmax(0,1fr) 360px;gap:16px}
}
@media (max-width:759px){
  .pl-work{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .pl-stage{min-height:160px;padding:12px}
  .pl-imgbox{width:min(100%,calc((52vh - 24px) * var(--arn,1.333)))}
  .pl-panel{position:static}
  .pl-acts{position:sticky;bottom:0;z-index:5;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -10px 20px -18px rgba(0,0,0,.45);padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))}
  html[data-look="garden"] .pl .pl-acts{border-radius:0 0 var(--r-card) var(--r-card)!important}
  .pl-toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:599px){
  .pl-head{margin:2px 0 10px;min-height:44px}
  .pl-title h1{font-size:21px}
  .pl-safe{font-size:12px}
  .pl-headacts .pl-ico{width:40px;height:44px}
  .pl[data-state="ready"] .pl-headacts [data-kg-install]{display:none}
  .pl-modebar{margin-bottom:12px}
  .pl-modes{flex:1;min-width:0}
  .pl-modes button{padding:0 8px;font-size:14px}
  .pl-pill span{display:none}
  .pl-pill{width:48px;padding:0;justify-content:center}
  .pl-drop{min-height:auto;padding:26px 16px 28px}
  .pl-drop-sub{font-size:15px}
  .pl-phead{padding:14px 12px 0;flex-wrap:wrap}
  .pl-count button{min-width:34px}
  .pl-tip{margin:10px 12px 2px}
  .pl-copyall{margin:6px 12px 0}
  .pl-acts{padding-inline:12px}
  .pl-gen{padding:18px 14px}
  .pl-wheel{max-width:260px}
  .pl-dlg{width:100%;max-width:100%;margin:auto auto 0;max-height:94dvh}
  html[data-look="garden"] .pl .pl-dlg{border-radius:16px 16px 0 0!important}
  .pl-dlg-in{padding:14px 16px 16px}
  .pl-picked-t{margin-inline-start:0;flex-basis:100%;order:3;padding-inline-start:2px}
  .pl-picked-to{order:4}
  #plPickedX{margin-inline-start:auto}
}
@media (max-width:374px){
  .pl-list{gap:8px;padding:10px 8px 6px}
  .pl-hex{font-size:16px}
  .pl-ctr{font-size:11.5px;padding:0 6px}
  .pl-ctr b{font-size:11.5px}
  .pl-code{font-size:12px}
  .pl-count button{min-width:30px}
  .pl-acts .g-btn{padding:0 10px;font-size:14.5px}
}
/* phones on their side: short screen, keep the picture small enough to see the list beside it */
@media (max-height:500px) and (orientation:landscape){
  .palette-page{--pl-stage-h:calc(100vh - 120px)}
  .pl-panel{position:static}
  .pl-head{min-height:44px;margin-bottom:8px}
  .pl-drop{min-height:auto}
}
@media (pointer:coarse){.pl-paste{display:none}}
@media (prefers-reduced-motion:reduce){
  .pl *,.pl *::before,.pl *::after{animation:none!important;transition:none!important}
}