/* bottombar.css - fill / outline slots, colour palette, brush sizes */

.bottom{grid-area:bottom;background:var(--cream);border-top:3px solid var(--ink);display:flex;align-items:center;gap:22px;padding:0 20px;min-width:0;overflow-x:auto}
.slots{display:flex;flex-direction:column;gap:12px}
.slot{display:flex;align-items:center;justify-content:space-between;gap:14px;width:150px;height:44px;padding:0 8px 0 14px;border:2px solid var(--ink);border-radius:12px;background:#fff;font-weight:500;font-size:15px;box-shadow:0 2px 0 var(--ink)}
.slot.on{background:var(--lime);box-shadow:0 2px 0 var(--ink),0 0 0 3px var(--cream),0 0 0 5px var(--ink)}
.chip{width:30px;height:28px;border-radius:7px;border:2px solid var(--ink)}

.palette{display:grid;grid-template-columns:repeat(9,36px);grid-template-rows:36px 36px;gap:14px}
.sw{width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);padding:0;position:relative;overflow:hidden}
.sw:hover{transform:scale(1.12)}
.sw.sel{box-shadow:0 0 0 3px var(--cream),0 0 0 5px var(--ink);overflow:visible}
.sw.none{background:#fff}
.sw.none::after{content:"";position:absolute;left:50%;top:-4px;width:3px;height:44px;background:#ff5a36;transform:translateX(-50%) rotate(45deg)}
.sw.rainbow{background:conic-gradient(#f33,#fd3,#4d1,#0fc,#09f,#c3f,#f33)}
.sw input{position:absolute;inset:-4px;opacity:0;cursor:pointer;width:calc(100% + 8px);height:calc(100% + 8px)}

.vr{width:0;align-self:stretch;margin:22px 0;border-left:2px dashed var(--lime-deep)}
.sizes{display:flex;align-items:center;gap:10px}
.size{width:52px;height:52px;border-radius:14px;border:2px solid var(--ink);background:#fff;display:grid;place-items:center;padding:0;box-shadow:0 2px 0 var(--ink)}
.size i{display:block;border-radius:50%;background:var(--ink)}
.size.on{background:var(--lime);box-shadow:0 2px 0 var(--ink),0 0 0 3px var(--cream),0 0 0 5px var(--ink)}
.slot:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;background:#f1f1f1}