/* palettes.in mega menu: the Tools menu is a palette.
   Ten solid swatches in three strips. Hover one and it opens into a live preview of the tool. */

/* the panel hangs from the nav, so the dropdown wrapper must not be the containing block */
.dd{position:static}.dd::after{display:none}

.mm{display:none;position:absolute;left:0;right:0;top:100%;margin-top:1px;background:var(--sf);box-shadow:0 60px 80px -50px rgba(0,0,0,.45);z-index:30;text-align:left;color:var(--ink)}
.dd.on .mm{display:block}
@media(hover:hover){.dd:hover .mm{display:block}}
/* the button fills the nav height, so there is no dead zone between it and the panel; this just covers the 1px nav border */
.dd>button{height:68px}
.mm::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:3px}
.mm-in{max-width:1560px;margin:0 auto;padding:26px clamp(20px,3vw,40px) 22px}

/* while open, the nav takes the panel's surface so the two read as one piece */
@media(min-width:901px){
  nav:has(.dd.on){background:var(--sf);border-bottom-color:transparent}
}
@media(min-width:901px) and (hover:hover){
  nav:has(.dd:hover){background:var(--sf);border-bottom-color:transparent}
}

/* dims the page behind the open menu */
body::after{content:"";position:fixed;inset:0;z-index:19;background:rgba(16,14,12,.34);opacity:0;pointer-events:none;transition:opacity .25s}
body:has(.dd.on)::after{opacity:1}
@media(hover:hover){body:has(.dd:hover)::after{opacity:1}}

/* three strips, one per job */
.mm-g{display:flex;gap:20px}
.m-grp{display:flex;flex-direction:column;min-width:0;flex:var(--n) 1 0%;transition:flex-grow .5s cubic-bezier(.2,.8,.2,1)}
.m-grp:has(.m-act){flex-grow:calc(var(--n) + 2.4)}
.m-gl{display:flex;align-items:baseline;gap:10px;margin:0 4px 12px;white-space:nowrap;overflow:hidden}
.m-gl b{font:700 18px var(--hd);letter-spacing:-.02em}
.m-gl span{font-size:13.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis}
.m-st{display:flex;height:clamp(320px,38vh,372px);border-radius:26px;overflow:hidden;box-shadow:0 22px 50px -28px rgba(0,0,0,.45)}

/* one swatch */
.mm a.m-tl,.links a.m-tl:hover,.links a.m-tl[aria-current]{color:var(--f);white-space:normal}
.m-tl{position:relative;flex:1 1 0%;min-width:0;overflow:hidden;background:var(--c);color:var(--f);transition:flex-grow .5s cubic-bezier(.2,.8,.2,1);transform-origin:bottom;animation:mmrise .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 24ms)}
.m-tl{box-shadow:1px 0 0 var(--c)}
.m-tl.m-act{flex-grow:3.4}
@keyframes mmrise{from{transform:scaleY(.3);opacity:0}}
.m-tl:focus-visible{outline:3px solid var(--f);outline-offset:-7px}
.m-tl[aria-current]::after{content:"";position:absolute;left:18px;top:18px;width:9px;height:9px;border-radius:50%;background:currentColor}

/* collapsed: the name stands on the swatch like a label on a paint chip */
.m-tl .m-v{position:absolute;left:50%;bottom:20px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font:800 23px/1 var(--hd);letter-spacing:-.025em;white-space:nowrap;transition:opacity .15s}
.m-tl.m-act .m-v{opacity:0}

/* expanded */
.m-tl .m-x{position:absolute;left:0;top:0;bottom:0;width:var(--xw,340px);padding:18px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s}
.m-tl.m-act .m-x{opacity:1;visibility:visible;transition:opacity .3s .2s,visibility 0s .2s}
.mm-in{--xw:clamp(250px,22.5vw,350px)}
.m-x .m-hl{align-self:flex-end;font:600 12.5px var(--bd2);font-style:normal;letter-spacing:.02em;opacity:.8;margin-bottom:16px;height:12px}
.m-x .m-pv{flex:1;display:flex;align-items:center;min-height:0}
.m-x .m-nm{font:800 31px/1 var(--hd);letter-spacing:-.035em;margin-top:16px}
.m-x small{display:block;font-size:14px;line-height:1.35;max-width:23ch;margin-top:6px;opacity:.88;padding-right:44px}
.m-x .m-go{position:absolute;right:18px;bottom:18px;width:40px;height:40px;border-radius:50%;background:var(--f);color:var(--c);display:grid;place-items:center;transition:transform .2s}
.m-tl:hover .m-go{transform:rotate(45deg)}

/* footer row */
.mmf{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:14px;color:var(--mut);flex-wrap:wrap}
.mmf .m-sp{margin-left:auto}
.mmf a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--bd);border-radius:999px;padding:7px 16px;color:var(--ink);font-weight:600;background:var(--sf);transition:border-color .15s}
.mmf a:hover{border-color:var(--ink)}
.mmf a i{display:flex;width:18px;height:12px;border-radius:4px;overflow:hidden}.mmf a i b{flex:1}

/* previews: a little white window on the swatch, drawn in the tool's own vocabulary */
.m-pk{display:block;width:100%;background:#fffdfa;color:#1c1b1a;border-radius:16px;padding:12px;box-shadow:0 16px 30px -14px rgba(0,0,0,.55);font-size:11.5px;line-height:1.3}
.m-pk.m-fl{padding:0;overflow:hidden}
.m-pk svg{display:block;width:100%;height:auto;border-radius:10px}
.m-pk .m-dots{display:flex;gap:6px;margin-top:9px}.m-pk .m-dots i{flex:1;height:24px;border-radius:7px}
.m-pk .m-mu{color:#6b6761}
/* colour picker */
.m-pk .m-r2{display:flex;gap:12px;align-items:center}
.m-pk .m-big{flex:none;width:58px;height:58px;border-radius:14px}
.m-pk .m-kvl{display:grid;gap:3px;font-weight:600;font-variant-numeric:tabular-nums}.m-pk .m-kvl u{text-decoration:none;display:inline-block;width:32px;color:#8a857d;font-weight:600}
/* colour library */
.m-pk .m-lib{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 8px}
.m-pk .m-lib span{display:block}.m-pk .m-lib i{display:block;height:34px;border-radius:9px;margin-bottom:4px}.m-pk .m-lib b{font-weight:600;font-size:11px}
/* colour bot */
.m-pk .m-bub{display:block;padding:8px 11px;border-radius:12px;max-width:88%}
.m-pk .m-bub.m-u{margin-left:auto;background:#1c1b1a;color:#fff;border-bottom-right-radius:4px}
.m-pk .m-bub.m-b{margin-top:8px;background:#f1ece4;border-bottom-left-radius:4px}
.m-pk .m-bub.m-b .m-dots{margin:0 0 7px}.m-pk .m-bub.m-b .m-dots i{height:20px}
/* gradients */
.m-pk .m-gg{display:grid;grid-template-columns:1fr 1fr;gap:8px}.m-pk .m-gg i{height:50px;border-radius:10px}
/* gradient maker */
.m-pk .m-gbar{position:relative;display:block;height:30px;border-radius:9px;margin:6px 0 16px}
.m-pk .m-gbar i{position:absolute;top:-6px;width:16px;height:42px;margin-left:-8px;border-radius:6px;background:#fff;border:2px solid #1c1b1a}
.m-pk .m-code{display:block;background:#f1ece4;border-radius:8px;padding:7px 9px;font:600 10.5px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.m-pk .m-meta{display:block;margin-top:8px;color:#6b6761}
/* gradient palette */
.m-pk .m-steps{display:flex;gap:3px}.m-pk .m-steps i{flex:1;height:54px;border-radius:7px}
.m-pk .m-ends{display:flex;justify-content:space-between;margin-top:8px;font-weight:600;font-variant-numeric:tabular-nums}
/* contrast checker */
.m-pk .m-ct{display:grid;grid-template-columns:1fr 1fr;height:84px}
.m-pk .m-ct span{display:grid;place-items:center;font:800 38px var(--hd);letter-spacing:-.03em}
.m-pk .m-ct span+span{box-shadow:inset 1px 0 #e8e3dc}
.m-pk .m-cr{display:flex;align-items:center;gap:6px;padding:11px 12px;flex-wrap:wrap}
.m-pk .m-cr b{font:800 20px var(--hd);letter-spacing:-.03em;margin-right:auto}
.m-pk .m-cr i{font-style:normal;font-weight:700;font-size:11px;background:#1f9d55;color:#fff;border-radius:99px;padding:3px 9px}
/* tailwind shades */
.m-pk .m-tw{display:flex;gap:3px}.m-pk .m-tw i{flex:1;height:60px;border-radius:6px}
.m-pk .m-twl{display:flex;justify-content:space-between;margin-top:8px;font-weight:600;font-variant-numeric:tabular-nums}
/* palette visualizer */
.m-pk .m-mk{display:block;height:150px;background:#fff}
.m-pk .m-mk-n{display:flex;align-items:center;gap:7px;padding:9px 12px}.m-pk .m-mk-n i{width:14px;height:14px;border-radius:5px;margin-right:auto}.m-pk .m-mk-n s{width:22px;height:5px;border-radius:9px;background:#d9d3ca}
.m-pk .m-mk-h{display:block;margin:0 10px;padding:14px 14px 16px;border-radius:12px}
.m-pk .m-mk-h b{display:block;height:9px;border-radius:9px;background:#1c1b1a;margin-bottom:6px}
.m-pk .m-mk-h em{display:block;width:54px;height:16px;border-radius:99px;margin-top:10px}
.m-pk .m-mk-c{display:flex;gap:8px;padding:10px}.m-pk .m-mk-c i{flex:1;height:26px;border-radius:8px}

@media(max-width:1200px){.m-gl span{display:none}}
@media(hover:none){.mmf>span:first-child{display:none}}

/* phones and narrow windows: the same ten tools as a plain list inside the hamburger menu */
@media(max-width:900px){
  body::after{display:none}
  .dd .mm{display:none;position:static;margin:0;background:none;box-shadow:none;width:100%}
  .dd:hover .mm{display:none}
  .dd.on .mm{display:block}
  .links .dd>button{pointer-events:auto;width:100%;justify-content:space-between;padding:2px 0;cursor:pointer}
  .links .dd>button svg{display:block}
  .m-tl{box-shadow:none}
  .mm::before{display:none}
  .dd>button{height:auto}
  .mm-in{padding:2px 0 0}
  .mm-g{display:block}
  .m-grp{display:block}.m-grp:has(.m-act){flex-grow:0}
  .m-gl{margin:10px 0 2px}.m-gl b{font:700 13px var(--bd2);color:var(--mut)}.m-gl span{display:none}
  .m-st{display:block;height:auto;border-radius:0;box-shadow:none;overflow:visible}
  .mm a.m-tl,.links a.m-tl:hover{color:var(--mut)}
  .mm a.m-tl[aria-current],.links a.m-tl[aria-current]{color:var(--ink)}
  .m-tl{display:flex;align-items:center;gap:12px;flex:none;background:none;padding:6px 0;overflow:visible;animation:none;transition:none}
  .m-tl::before{content:"";width:22px;height:22px;border-radius:7px;background:var(--c);flex:none}
  .m-tl[aria-current]::after{display:none}
  .m-tl .m-v{position:static;writing-mode:horizontal-tb;transform:none;font:500 15px var(--bd2);letter-spacing:0}
  .m-tl.m-act .m-v{opacity:1}
  .m-tl .m-x{display:none}
  .mmf{display:none}
}
@media(prefers-reduced-motion:reduce){.m-tl,.m-grp,.m-x,.m-v,.m-go,body::after{transition:none!important;animation:none!important}}