/* app.css — STRUCTURE + COMPONENTS for the Paint Mix preview. * Holds NO theme values: every colour / font / radius / shadow is a CSS variable * (var(--x)) defined in a theme file (theme-*.css). Swap the * attribute to re-skin without touching this file or the markup. * Component classes (.card, .ptog, .picker, .recipe-row, .prec-bar, .cell …) are * ported from Eric's spectra.html so Theme "spectra" reproduces that tool exactly. */ *{box-sizing:border-box;margin:0;padding:0} body{font-family:var(--font);background:var(--paper);color:var(--ink);line-height:1.5; -webkit-font-smoothing:antialiased} h1,h2,h3{letter-spacing:-.02em;line-height:1.1;font-weight:680} .mono{font-family:var(--mono)} .wrap{max-width:1100px;margin:0 auto;padding:0 22px} .hidden{display:none !important} a.link{color:var(--accent);cursor:pointer;text-decoration:none} /* ---- top bar: logo · nav · theme · account ---- */ .topbar{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)} .topbar .row{display:flex;align-items:center;gap:18px;padding:14px 0;flex-wrap:wrap} .logo{display:flex;align-items:center;gap:10px;font-weight:740;font-size:20px;letter-spacing:-.02em} .logo .dot{width:22px;height:22px;border-radius:7px; background:conic-gradient(from 220deg,var(--accent),var(--accent-2),var(--good),var(--accent))} .appnav{display:flex;gap:4px;margin-left:6px} .navtab{appearance:none;background:none;border:0;font:inherit;font-weight:620;font-size:14px; color:var(--muted);cursor:pointer;padding:8px 14px;border-radius:10px} a.navtab{text-decoration:none} .navtab:hover{color:var(--ink)} .navtab.active{color:var(--ink);background:var(--paper-2)} .spacer{flex:1} .themesel{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)} .themesel select{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--line); border-radius:8px;background:var(--card);color:var(--ink)} .mebar{font-size:12.5px;color:var(--muted)} .mebar b{color:var(--ink)} /* ---- cards ---- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:22px;margin-top:22px} .card h2{font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted); margin-bottom:16px;font-weight:680} .subtle{color:var(--muted);font-size:13.5px;line-height:1.55} /* ---- buttons ---- */ .btn{border:0;font:inherit;font-weight:660;cursor:pointer;border-radius:11px;padding:13px 20px; font-size:15.5px;background:var(--ink);color:var(--card);width:100%} .btn:hover{filter:brightness(1.12)} .btn-inline{width:auto;padding:11px 16px;white-space:nowrap;font-size:14.5px} .btn-ghost{background:var(--paper-2);color:var(--ink)} .btn-sm{padding:6px 11px;font-size:13px;border-radius:9px} /* ---- paint toggles (spectra .ptog) ---- */ .brandgroup{margin-bottom:6px} .brandlabel{font-size:11px;font-weight:680;text-transform:uppercase;letter-spacing:.05em; color:var(--muted);margin:10px 0 6px} .toggles{display:flex;flex-wrap:wrap;gap:6px} .ptog{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px; padding:4px 11px 4px 6px;cursor:pointer;user-select:none;background:var(--paper);font-size:12.5px;font-weight:560;color:var(--ink)} .ptog .tchip{width:15px;height:15px;border-radius:5px;border:1px solid rgba(0,0,0,.12);flex:none} .ptog.off{opacity:.4;background:transparent} .ptog .buyc{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin:-2px -3px -2px 1px;border-radius:50%;color:var(--muted);cursor:pointer;flex:none} .ptog .buyc:hover{background:var(--paper-2);color:var(--accent)} .ptog .buyc svg{display:block} /* collapsible brand sections + colour-family groups */ .brandsec{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;background:var(--paper)} .brandhdr{display:flex;align-items:center;gap:8px;padding:9px 12px;flex-wrap:wrap} .bhead-main{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;padding:3px 0} .bhead-main:hover .bname{color:var(--accent)} .brandsec.open .brandhdr{border-bottom:1px solid var(--line)} .bcaret{color:var(--muted);font-size:11px;width:12px;text-align:center;flex:none} .bname{font-weight:680;font-size:14.5px} .bcount{margin-left:auto;font-size:12px;color:var(--muted)} .brandhdr .btn{padding:4px 9px;font-size:11.5px;border-radius:8px} .brandhdr .reset-btn:hover{color:var(--bad)} .brandbody{padding:13px 14px 15px} .famgroup{margin-bottom:11px} .famgroup:last-child{margin-bottom:0} .famhdr{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;padding:2px 0;margin-bottom:7px} .famhdr:hover .famlabel{color:var(--ink)} .famcaret{color:var(--muted);font-size:9px;width:9px;text-align:center;flex:none} .famlabel{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0} .famcount{font-size:10px;color:var(--muted)} /* ---- target picker (spectra .picker) ---- */ .picker{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap} .picker input[type=color]{width:62px;height:62px;border:1px solid var(--line);border-radius:12px; background:none;cursor:pointer;padding:4px} .picker .hexbox{flex:1;min-width:120px} .picker label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600} .picker input[type=text]{width:100%;font-size:15px;padding:9px 11px;border:1px solid var(--line); border-radius:9px;font-family:var(--font);background:var(--card);color:var(--ink)} .btn-inline.findbtn{align-self:flex-end} .pickhint{font-size:12px;margin:-4px 0 14px} /* large visual colour picker: saturation/value field + hue slider (full spectrum, theme-independent by design — you must see real colours to pick them) */ .cpick{margin:16px 0 6px;width:100%;max-width:640px} .cpick-sv{position:relative;width:100%;height:260px;border-radius:12px;border:1px solid var(--line); cursor:crosshair;touch-action:none; background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--hue,0),100%,50%)} .svCur{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.45);transform:translate(-50%,-50%);pointer-events:none} .cpick-hue{position:relative;width:100%;height:16px;border-radius:8px;margin-top:11px;cursor:pointer;touch-action:none; background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)} .hueCur{position:absolute;top:50%;width:9px;height:22px;border-radius:4px;border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.45);transform:translate(-50%,-50%);pointer-events:none} /* reachability mask overlays (dim what the active tubes can't mix) */ .cpick-sv .svmask{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:12px} .cpick-hue .huemask{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:8px} .maskRow{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .maskToggle{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none} .maskToggle input{cursor:pointer;margin:0} @media(max-width:600px){.maskToggle{font-size:12.5px}} /* ---- recipe result (spectra) ---- */ .mixrow{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap} .mixleft{flex:1 1 420px;min-width:0} .mixright{flex:0 0 344px;position:sticky;top:84px} @media(max-width:840px){.mixright{flex-basis:100%;position:static}} #result{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;display:none;max-width:600px} #recipe{min-height:120px} .swpair{display:flex;gap:14px;margin-bottom:16px} .swpair .sw{flex:1;border-radius:12px;height:78px;border:1px solid rgba(0,0,0,.08);position:relative} @media(max-width:600px){.swpair .sw{height:96px}} .swpair .lbl{position:absolute;bottom:8px;left:9px;font-size:11px;font-weight:650; background:var(--card);color:var(--ink);padding:3px 8px;border-radius:6px;opacity:.9} .verdict{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:680} .verdict.good{color:var(--good)} .verdict.warn{color:var(--warn)} .verdict.bad{color:var(--bad)} /* ΔE verdict + Save button as two columns: verdict text wraps in the left column, Save button always pinned right */ .desave{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px} .desave .verdict{display:block;flex:1 1 0;min-width:0;line-height:1.4} .desave #saveRow{flex:none} @media(max-width:600px){ .desave{flex-direction:column;align-items:center;gap:10px;text-align:center} .desave .verdict{flex:none;width:100%} } .recipe-head{display:flex;align-items:flex-end;gap:10px;padding:0 0 5px} .recipe-head .spc{flex:1;min-width:0} .recipe-head .hl{font-size:10px;font-weight:700;color:var(--muted);text-align:right; text-transform:uppercase;letter-spacing:.03em} .recipe-head .hl.pct{width:42px}.recipe-head .hl.prt{width:40px}.recipe-head .hl.gr{width:54px} .prec-bar{height:5px;width:156px;margin:0 0 3px auto;border-radius:3px; background:linear-gradient(90deg,var(--line),var(--accent))} .prec-cap{display:flex;justify-content:space-between;width:156px;margin:0 0 11px auto; font-size:9.5px;color:var(--muted);letter-spacing:.02em} .recipe-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)} .recipe-row:first-of-type{border-top:0} .recipe-row .chip{width:26px;height:26px;border-radius:7px;border:1px solid rgba(0,0,0,.1);flex:none} .recipe-row .nm{flex:1;min-width:0;font-size:14px;font-weight:560;line-height:1.25} .recipe-row .pct{font-size:13px;font-weight:680;width:42px;text-align:right} .recipe-row .prt{font-size:13px;color:var(--muted);width:40px;text-align:right} .recipe-row .gr{font-size:13px;color:var(--muted);width:54px;text-align:right} .batchnote{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5} .batchnote b{color:var(--ink)} /* Save button centered under the ΔE verdict; hex/RGB + precision bar share one row */ .saverow-center{text-align:center;margin:4px 0 14px} .saverow-center .btn{width:auto} .cellrow{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:2px 0 12px} .cellhex{flex:1;min-width:0} .precwrap{flex:none;display:flex;flex-direction:column;align-items:flex-end} .precwrap .prec-bar{margin:0 0 3px 0} .precwrap .prec-cap{margin:0} /* ---- gamut chart (spectra board; PASSIVE here — no click) ---- */ .boardwrap{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:2px} .scrollhint{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin:0 2px 9px; font-size:12.5px;font-weight:640;color:var(--accent);letter-spacing:.01em;user-select:none} .scrollhint[hidden]{display:none} .scrollhint .arr{display:inline-block;animation:hintnudge 1.15s ease-in-out infinite} @keyframes hintnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}} #board{position:relative;flex:none} .cell{position:absolute;border-radius:2px} .vlabel{position:absolute;font-size:10px;color:var(--muted);text-align:right;width:36px} .hlabel{position:absolute;font-size:11px;color:var(--muted);transform:translateX(-50%);white-space:nowrap} .colhdr{position:absolute;font-size:9.5px;color:var(--muted);transform:translateX(-50%)} .chartctl{display:flex;gap:22px;align-items:center;margin:2px 0 14px;font-size:13px;color:var(--muted);flex-wrap:wrap} .chartctl select{font:inherit;font-size:13px;padding:3px 6px;border:1px solid var(--line);border-radius:7px; background:var(--card);color:var(--ink)} #suggestOut{margin-top:12px;font-size:14px;line-height:1.55} .pill{display:inline-block;background:var(--paper-2);border-radius:7px;padding:3px 9px;margin:3px 5px 0 0;font-size:12.5px} /* ---- palettes (Paint Drawer manager + Studio active) ---- */ /* Collapsed palettes read as a clean divider list (no full-width filled bars): each row is separated by a hairline, carries a small colour preview for identity, and only the active/open/hovered row gets a wash. */ .palette-list{display:flex;flex-direction:column} .palette-item{display:flex;align-items:center;gap:11px;padding:12px 9px;border:0;border-top:1px solid var(--line); border-radius:8px;cursor:pointer;background:transparent} .palette-list>.palette-item:first-child{border-top:0} .palette-item:hover{background:var(--paper-2)} .palette-item.active{background:color-mix(in srgb,var(--accent) 7%,transparent);box-shadow:inset 3px 0 0 var(--accent)} .palette-item .caret{color:var(--muted);font-size:10px;width:10px;flex:none;text-align:center} .palette-item .pname{flex:1;min-width:0;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* small colour preview shown on collapsed rows so palettes are tellable apart */ .pal-mini{display:flex;gap:3px;align-items:center;flex:none} .pal-mini i{width:15px;height:15px;border-radius:4px;border:1px solid rgba(0,0,0,.1)} .palette-item .pcount{font-size:12px;color:var(--muted);flex:none} .palette-item .ren{color:var(--muted);cursor:pointer;padding:0 3px;font-size:13px;flex:none} .palette-item .ren:hover{color:var(--ink)} .palette-item .x{color:var(--muted);cursor:pointer;padding:0 4px;flex:none} .palette-item .x:hover{color:var(--bad)} /* expanded palette → row + tray form one washed block holding the saved colours */ .palette-item.open{background:var(--paper-2);border-top-color:transparent;border-radius:8px 8px 0 0} .pal-swatches{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:4px 12px 14px;margin-bottom:8px; border:0;border-radius:0 0 8px 8px;background:var(--paper-2)} .pal-sw{position:relative;width:46px;height:46px;border-radius:9px;border:1px solid rgba(0,0,0,.14);flex:none;cursor:pointer} .pal-sw:hover{box-shadow:0 0 0 2px var(--accent)} .pal-sw-x{position:absolute;top:3px;right:3px;width:17px;height:17px;border-radius:5px; background:rgba(0,0,0,.42);color:#fff;font-size:13px;line-height:17px;text-align:center; font-weight:700;cursor:pointer;opacity:.85} .pal-sw-x:hover{opacity:1;background:var(--bad)} .saveitem{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px} .saveitem:first-of-type{border-top:0} .saveitem .sw{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.12);flex:none} .saveitem .si-main{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0} .saveitem .subtle{font-size:14px} .saveitem .x{margin-left:auto;color:var(--muted);cursor:pointer;padding:0 4px} .saveitem .x:hover{color:var(--bad)} .rname{font:inherit;font-weight:680;color:var(--ink);background:transparent;border:0;border-bottom:1px dotted var(--muted);padding:1px 0;width:100%;cursor:text} .rname:hover{border-bottom-color:var(--ink)} .rname:focus{outline:none;border-bottom:1px solid var(--accent)} .activepal{font-size:14px;color:var(--muted);margin-bottom:10px} .activepal b{color:var(--ink)} .activepal .ap-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .activepal .ap-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} /* a full-width, zero-height break forces the button onto its own line under the swatches; the button itself stays content-width and left-aligned, with a card bg + border so it reads as a real button against the washed tray. */ .pal-break{flex-basis:100%;height:0} .palprint{width:auto;align-self:flex-start;margin-top:10px; background:var(--card);border:1px solid var(--line);color:var(--ink)} .palprint:hover{background:var(--paper);border-color:var(--accent)} /* ---- printable palette sheet (in-app preview modal → browser Print / Save PDF) ---- */ #printModal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center; padding:36px 16px;overflow:auto} .printbackdrop{position:fixed;inset:0;background:rgba(0,0,0,.45)} .printwin{position:relative;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow); width:100%;max-width:560px;overflow:hidden} .printbar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--paper)} #printSheet{padding:26px 28px;-webkit-print-color-adjust:exact;print-color-adjust:exact} #printSheet *{-webkit-print-color-adjust:exact;print-color-adjust:exact} .ps-title{display:flex;align-items:center;gap:9px;font-size:27px;font-weight:740;letter-spacing:-.02em} .ps-sub{color:var(--muted);font-size:14.5px;margin:5px 0 18px} .ps-row{display:flex;gap:16px;padding:17px 0} .ps-row + .ps-row{border-top:1px solid var(--line)} .ps-sw{width:66px;height:66px;border-radius:12px;border:1px solid rgba(0,0,0,.12);flex:none} .ps-body{flex:1;min-width:0} .ps-head{font-size:17.5px;margin-bottom:7px} .ps-head b{font-family:var(--mono)} .ps-meta{color:var(--muted);font-size:14px} .ps-rhead{display:flex;gap:9px;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding-bottom:3px} .ps-paint{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:16.5px} .ps-paint .chip{width:23px;height:23px;border-radius:6px;border:1px solid rgba(0,0,0,.1);flex:none} .ps-nm{flex:1;min-width:0} .ps-pct{width:54px;text-align:right;font-weight:660} .ps-prt{width:52px;text-align:right;color:var(--muted)} .ps-gr{width:64px;text-align:right;color:var(--muted)} .ps-rhead .ps-nm{flex:1} .ps-foot{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;line-height:1.5} .ps-foot b{color:var(--ink)} @media print{ body > *:not(#printModal){display:none !important} #printModal{display:block !important;position:static !important;padding:0 !important;overflow:visible !important;background:#fff} #printModal .printbackdrop,#printModal .printbar{display:none !important} .printwin{position:static !important;box-shadow:none !important;border-radius:0 !important;max-width:none !important;width:auto !important;background:#fff} #printSheet{padding:2mm 4mm} } @page{margin:12mm} /* ---- recipe detail popup (Drawer swatch → recipe + rename + delete) ---- */ #recipeModal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto} .rmbackdrop{position:fixed;inset:0;background:rgba(0,0,0,.45)} .rmwin{position:relative;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:440px;overflow:hidden} #rmBody{padding:22px 22px 8px} .rm-head{display:flex;gap:14px;align-items:center;margin-bottom:14px} .rm-sw{width:60px;height:60px;border-radius:12px;border:1px solid rgba(0,0,0,.12);flex:none} .rm-titles{min-width:0} .rm-name{font:inherit;font-size:19px;font-weight:740;letter-spacing:-.01em;color:var(--ink);background:transparent;border:0;border-bottom:1px dotted var(--muted);padding:2px 0;width:100%;cursor:text} .rm-name:focus{outline:none;border-bottom:1px solid var(--accent)} .rm-recipe{border-top:1px solid var(--line);padding-top:10px} .rm-notewrap{border-top:1px solid var(--line);padding-top:10px;margin-top:12px} .rm-note{display:block;width:100%;font:inherit;font-size:13.5px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-top:6px;resize:vertical} .rm-note:focus{outline:none;border-color:var(--accent)} .rmbar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-top:1px solid var(--line);background:var(--paper)} .btn.rm-del{background:var(--paper-2);color:var(--bad)} .btn.rm-del:hover{background:var(--bad);color:#fff} /* ---- account panel (topbar name → login code, batch default, prefs note) ---- */ #accountModal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto} #acctBody{padding:22px 22px 8px} .acct-name{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:740;letter-spacing:-.01em;color:var(--ink)} .admin-badge{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--accent);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:2px 8px} .acct-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px;margin-top:12px} .acct-lbl{font-size:13.5px;color:var(--muted)} .acct-code{font-family:var(--mono);font-size:14px;letter-spacing:1px;color:var(--ink)} #acctBatch{width:80px;font-size:15px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);font-family:inherit} #acctBatch:focus{outline:none;border-color:var(--accent)} .acct-suffix{font-size:13.5px;color:var(--muted);margin-left:-4px} .acct-sub{font-size:13px;line-height:1.5;margin-top:10px} /* ---- suggest popup (per-brand buy-next) ---- */ #suggestModal,#findMoreModal,#buyModal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;overflow:auto} .smbackdrop{position:fixed;inset:0;background:rgba(0,0,0,.45)} .smwin{position:relative;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:420px;overflow:hidden} #smBody,#buyBody{padding:22px 22px 6px;min-height:90px} .buybox{text-align:center} .buybox-h{font-size:13.5px;color:var(--muted);margin-bottom:8px} .buybox-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:11px;font-size:15px} .buybox-links a{color:var(--accent);font-weight:640;text-decoration:none} .buybox-links a:hover{text-decoration:underline} .buybox-sep{color:var(--line)} .buybox-disc{font-size:11.5px;color:var(--muted);margin-top:10px} .sm-title{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:13px} .sm-buy{display:flex;align-items:center;gap:13px;margin-bottom:6px} .sm-buy .tchip{width:42px;height:42px;border-radius:11px;border:1px solid rgba(0,0,0,.12);flex:none} .sm-name{font-size:18px;font-weight:740;letter-spacing:-.01em} .sm-runners{margin-top:14px} .sm-amz{margin-top:16px;padding-top:13px;border-top:1px solid var(--line)} .smbar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-top:1px solid var(--line);background:var(--paper)} /* ---- upload-a-screenshot popup (sample colours from a Procreate/Photoshop palette) ---- */ #uploadModal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto} .upbackdrop{position:fixed;inset:0;background:rgba(0,0,0,.45)} .upwin{position:relative;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:560px;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 80px)} #upBody{padding:22px 22px 14px;overflow:auto;flex:1;min-height:0} .up-title{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:10px} .up-desc{font-size:13.5px;line-height:1.5;color:var(--muted);margin-bottom:16px} .up-field{margin-bottom:14px} .up-field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600} .up-field input[type=text]{width:100%;font-size:15px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);font-family:inherit} .up-field input[type=text]:focus{outline:none;border-color:var(--accent)} .up-radios{display:flex;flex-direction:column;gap:8px;margin-top:2px} .up-radios label{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);font-weight:560;cursor:pointer} .up-radios input[type=radio]{accent-color:var(--accent);width:16px;height:16px;margin:0;flex:none} .up-radios .up-rh{color:var(--muted);font-size:12px;font-weight:500} .up-ocr{display:flex;align-items:flex-start;gap:9px;margin:12px 0 2px;font-size:13.5px;color:var(--ink);font-weight:560;cursor:pointer} .up-ocr input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;margin:1px 0 0;flex:none} .up-ocr .up-rh{display:block;color:var(--muted);font-size:12px;font-weight:500;margin-top:2px} .up-ocrnote{font-size:12.5px;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin:0 0 10px} .up-pick{display:flex;align-items:center;gap:10px;padding:14px;border:1px dashed var(--line);border-radius:10px;background:var(--paper);cursor:pointer;font-size:14px;color:var(--muted);font-weight:560} .up-pick:hover{border-color:var(--accent);color:var(--ink)} .up-pick input[type=file]{display:none} .up-pick .upfn{flex:1;color:var(--ink);font-weight:600} .up-preview-wrap{position:relative;margin:14px 0 12px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper-2);max-width:100%} .up-preview-wrap img{display:block;width:100%;height:auto;max-height:280px;object-fit:contain;background:#fff} .up-overlay{position:absolute;inset:0;pointer-events:none} .up-cell{position:absolute;border:2px solid rgba(31,111,107,.85);box-sizing:border-box;border-radius:3px;pointer-events:auto;cursor:pointer;transition:opacity .12s,border-color .12s} .up-cell:hover{border-color:var(--ink)} .up-cell.dropped{border-color:var(--bad);opacity:.35;background:rgba(192,73,47,.18)} .up-cell.empty{border-color:var(--muted);opacity:.4;border-style:dashed} .up-grid-ctl{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;font-size:13px;color:var(--muted);margin-bottom:10px} .up-grid-ctl label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600} .up-grid-ctl input[type=number]{width:64px;font-size:14px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);font-family:var(--mono)} .up-grid-ctl .up-count{flex:1;text-align:right;color:var(--muted);font-size:13px;align-self:center} .up-grid-ctl .up-count b{color:var(--ink);font-weight:680} .up-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px} .up-chip{width:24px;height:24px;border-radius:5px;border:1px solid rgba(0,0,0,.12);cursor:pointer;position:relative} .up-chip.dropped{opacity:.3} .up-chip.dropped::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 46%,var(--bad) 46%,var(--bad) 54%,transparent 54%)} .up-progress{margin-top:14px} .up-progress .upbar-fill{height:8px;background:var(--paper-2);border-radius:6px;overflow:hidden} .up-progress .upbar-fill span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .15s} .up-progress .uplbl{font-size:13px;color:var(--muted);margin-top:6px;text-align:center} .up-err{font-size:13px;color:var(--bad);margin-top:10px} .upbar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-top:1px solid var(--line);background:var(--paper)} .upbar .spacer{flex:1} /* ---- login overlay ---- */ #login{position:fixed;inset:0;background:var(--paper);display:flex;align-items:center;justify-content:center;z-index:60} #login .box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:30px;width:350px;text-align:center} #login .logo{justify-content:center;margin-bottom:6px} #login p{color:var(--muted);font-size:13.5px;margin:0 0 18px} #login input{width:100%;text-align:center;letter-spacing:3px;font-size:17px;font-family:var(--mono); padding:11px;border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:var(--paper);color:var(--ink)} #loginerr{color:var(--bad);font-size:12.5px;min-height:16px;margin-top:10px} /* ---- build marker + save toast (diagnostics) ---- */ .build{font-size:10px;color:var(--muted);opacity:.55;margin-left:8px} #toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px); background:var(--ink);color:var(--card);padding:10px 18px;border-radius:11px;font-size:14px;font-weight:640; box-shadow:var(--shadow);z-index:90;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:90vw;text-align:center} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} #toast.err{background:var(--bad);color:#fff} /* ---- motion: the "quiet fade" set (Eric picked demo A, 2026-06-10) ---- Gentle entrances + soft hovers only; everything respects prefers-reduced-motion. */ @keyframes pmaRise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}} @keyframes pmaFade{from{opacity:0} to{opacity:1}} @keyframes pmaRow{from{opacity:0; transform:translateX(-8px)} to{opacity:1; transform:none}} @keyframes pmaChip{from{transform:scale(.4); opacity:0} to{transform:scale(1); opacity:1}} /* entrances: login card, every card (re-fires on tab switch), the result reveal */ #login > div{animation:pmaRise .5s cubic-bezier(.22,.8,.3,1) both} .card{animation:pmaRise .45s cubic-bezier(.22,.8,.3,1) both} .card:nth-of-type(2){animation-delay:.06s}.card:nth-of-type(3){animation-delay:.12s}.card:nth-of-type(4){animation-delay:.18s} #result{animation:pmaRise .45s cubic-bezier(.22,.8,.3,1)} .verdict{animation:pmaFade .55s ease .12s both} /* recipe rows drift in one after another; their colour chips bloom */ .recipe-row{animation:pmaRow .35s ease-out both} .recipe-row:nth-child(2){animation-delay:.04s}.recipe-row:nth-child(3){animation-delay:.09s} .recipe-row:nth-child(4){animation-delay:.14s}.recipe-row:nth-child(5){animation-delay:.19s} .recipe-row:nth-child(6){animation-delay:.24s}.recipe-row:nth-child(7){animation-delay:.29s} .recipe-row:nth-child(8){animation-delay:.34s}.recipe-row:nth-child(9){animation-delay:.39s} .recipe-row .chip{animation:pmaChip .4s ease-out both; animation-delay:inherit} /* the target/mix swatches crossfade instead of snapping when the colour changes */ #swTarget,#swMixed{transition:background-color .55s ease} /* soft button lift; tabs ease */ .btn{transition:transform .16s ease, box-shadow .16s ease, filter .16s ease} .btn:hover{transform:translateY(-1px); filter:brightness(1.05)} .btn:active{transform:translateY(0) scale(.99); transition-duration:.06s} .navtab{transition:background-color .25s ease, color .25s ease} /* modals breathe in */ .smwin,.upwin{animation:pmaRise .32s cubic-bezier(.22,.8,.3,1)} .smbackdrop,.upbackdrop{animation:pmaFade .28s ease} .pill,.tchip{animation:pmaFade .4s ease both} @media (prefers-reduced-motion: reduce){ #login>div,.card,#result,.verdict,.recipe-row,.recipe-row .chip,.smwin,.upwin,.smbackdrop,.upbackdrop,.pill,.tchip{animation:none !important; opacity:1 !important} #swTarget,#swMixed,.btn,.navtab{transition:none !important} }