/* ============================================================
   PALETTE — shell tokens copied from blueprint.kindas.se so the
   two sites read as one system. Prefix: --sg-*
   ============================================================ */
:root{
  --sg-bg:#111;
  --sg-surface:#191919;
  --sg-surface-2:#212121;
  --sg-sunken:#0c0c0c;

  --sg-line:#2a2a2a;
  --sg-line-2:#333;

  --sg-accent:#888;
  --sg-accent-dim:#444;
  --sg-accent-ghost:rgba(140,140,140,.08);

  --sg-tx:#d8d8d8;
  --sg-tx-2:#999;
  --sg-tx-3:#666;

  --sg-sot:#c5a059;
  --sg-ok:#7a9a6a;
  --sg-err:#b06050;

  --sg-r:0px;
  --sg-pad:clamp(14px,2.5vw,28px);
  --sg-ease:cubic-bezier(.2,.7,.2,1);

  --sg-sans:'Inter',system-ui,-apple-system,sans-serif;
  --sg-mono:'JetBrains Mono',ui-monospace,monospace;

  /* a third of the wiki swatch card (108px wide, 32px colour band) */
  --sw:36px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}

body{
  background:var(--sg-bg);color:var(--sg-tx);font-family:var(--sg-sans);
  font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;
}

::selection{background:var(--sg-accent-ghost);color:var(--sg-tx)}
a{color:var(--sg-tx-2);text-decoration:none}
button{font-family:inherit;color:inherit;cursor:pointer;background:none;border:none}
input{font-family:inherit}
.mono{font-family:var(--sg-mono)}

*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:var(--sg-line-2);border-radius:20px;border:2px solid var(--sg-bg)}
*::-webkit-scrollbar-track{background:transparent}

/* ============================================================ SHELL */
.app{
  display:grid;grid-template-rows:auto 1fr;
  height:100vh;height:100dvh;
}

.topbar{
  display:flex;align-items:center;gap:12px;
  padding:0 var(--sg-pad);height:44px;flex-shrink:0;
  border-bottom:1px solid var(--sg-line);
  background:var(--sg-surface);
}

.brand{display:flex;align-items:center;gap:10px}
.plaque{
  font-family:var(--sg-mono);font-weight:500;font-size:10px;letter-spacing:.14em;
  color:var(--sg-tx-2);border:1px solid var(--sg-line-2);
  padding:3px 7px;background:var(--sg-accent-ghost);
}
.brand b{font-weight:500;font-size:14px}

.top-spacer{flex:1}

.readout{
  font-size:10.5px;color:var(--sg-tx-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:38vw;
}
.readout .sq{
  display:inline-block;width:8px;height:8px;margin-right:6px;
  border:1px solid var(--sg-line-2);vertical-align:-1px;
}
.readout.ok{color:var(--sg-ok)}

.save-dot{display:flex;align-items:center;gap:5px;color:var(--sg-tx-3);font-size:11px}
.save-dot i{
  width:5px;height:5px;border-radius:50%;background:var(--sg-ok);
  box-shadow:0 0 4px var(--sg-ok);transition:.3s;
}
.save-dot.dirty i{background:var(--sg-sot);box-shadow:0 0 4px var(--sg-sot)}
.save-dot.err i{background:var(--sg-err);box-shadow:0 0 4px var(--sg-err)}

.tbtn{
  border:1px solid var(--sg-line-2);padding:5px 10px;
  font-size:11px;color:var(--sg-tx-2);transition:.15s var(--sg-ease);
}
.tbtn:hover{border-color:var(--sg-accent-dim);color:var(--sg-tx);background:var(--sg-accent-ghost)}

/* ============================================================ MAIN */
.main{overflow-y:auto;min-height:0}
.main-inner{max-width:1180px;margin:0 auto;padding:var(--sg-pad) var(--sg-pad) 40px}

/* ---- one palette = one row --------------------------------- */
.pal{
  border:1px solid var(--sg-line);background:var(--sg-surface);
  margin-bottom:6px;transition:border-color .2s var(--sg-ease);
}
.pal:hover{border-color:var(--sg-line-2)}
.pal.editing{border-color:var(--sg-accent-dim);background:var(--sg-surface-2)}

.pal-head{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 12px}

.pal-name{
  font-size:12px;font-weight:500;color:var(--sg-tx);
  padding:2px 4px;margin-left:-4px;min-width:40px;outline:none;
  border:1px solid transparent;white-space:nowrap;
}
.pal.editing .pal-name{
  border-color:var(--sg-line-2);background:var(--sg-sunken);cursor:text;
}
.pal.editing .pal-name:focus{border-color:var(--sg-accent-dim)}
.pal-name:empty::before{content:'Untitled';color:var(--sg-tx-3)}

.pal-count{font-size:9.5px;color:var(--sg-tx-3);flex:1;padding-left:2px}

.pal-actions,.pal-edit-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}
.pal-actions{margin-left:-2px}
.pal-edit-actions{display:none;padding-left:8px;margin-left:2px;border-left:1px solid var(--sg-line)}
.pal.editing .pal-edit-actions{display:flex}

.pbtn{
  font-family:var(--sg-mono);font-size:10px;letter-spacing:.06em;
  padding:3px 8px;color:var(--sg-tx-3);border:1px solid transparent;
  transition:.12s;line-height:1.4;
}
.pbtn:hover{color:var(--sg-tx);border-color:var(--sg-line-2);background:var(--sg-accent-ghost)}
.pbtn.add{font-size:13px;padding:1px 8px}
.pal.editing .pbtn.edit{color:var(--sg-tx);border-color:var(--sg-accent-dim);background:var(--sg-accent-ghost)}
.pbtn.danger:hover{color:var(--sg-err);border-color:var(--sg-err)}
.pbtn.move{font-size:8px}

/* ---- the squares ------------------------------------------- */
.strip{
  display:flex;flex-wrap:wrap;gap:4px;
  padding:0 12px 10px;min-height:calc(var(--sw) + 2px);
}
.pal.editing .strip{padding-bottom:12px}

.sw{
  position:relative;width:var(--sw);height:var(--sw);
  border:1px solid var(--sg-line-2);cursor:pointer;flex:none;
  transition:transform .08s var(--sg-ease),box-shadow .12s;
}
.sw:hover{box-shadow:0 0 0 1px var(--sg-tx-2);z-index:2}
.sw:active{transform:scale(.94)}
.sw:focus-visible{outline:1px solid var(--sg-tx);outline-offset:1px}

/* copied flash */
.sw.copied::after{
  content:'✓';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;color:#fff;
  text-shadow:0 0 3px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.7);
  animation:pop .5s var(--sg-ease);
}
@keyframes pop{from{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1)}to{opacity:1}}

/* delete handle, only in edit mode */
.sw-x{
  position:absolute;top:-5px;right:-5px;width:13px;height:13px;
  display:none;align-items:center;justify-content:center;
  font-family:var(--sg-mono);font-size:9px;line-height:1;
  background:var(--sg-bg);color:var(--sg-tx-2);
  border:1px solid var(--sg-line-2);z-index:3;padding:0;
}
.pal.editing .sw-x{display:flex}
.sw-x:hover{background:var(--sg-err);color:#1a0d09;border-color:var(--sg-err)}

.pal.editing .sw{cursor:grab}
.pal.editing .sw:active{cursor:grabbing;transform:none}
.sw.dragging{opacity:.35}
.sw.drop-before{box-shadow:-3px 0 0 var(--sg-sot)}
.sw.drop-after{box-shadow:3px 0 0 var(--sg-sot)}
.strip.drop-end{box-shadow:inset -3px 0 0 var(--sg-sot)}

.strip-empty{
  font-family:var(--sg-mono);font-size:10px;color:var(--sg-tx-3);
  align-self:center;padding:8px 2px;
}

/* ---- new palette ------------------------------------------- */
.add-palette{
  display:flex;align-items:center;gap:10px;width:100%;
  border:1px dashed var(--sg-line-2);background:transparent;
  padding:9px 12px;color:var(--sg-tx-3);font-size:12px;
  transition:.15s var(--sg-ease);margin-top:2px;
}
.add-palette:hover{border-color:var(--sg-accent-dim);color:var(--sg-tx);background:var(--sg-accent-ghost)}
.add-palette .plus{font-size:15px;line-height:1;width:12px;text-align:center}

.foot{font-size:10px;color:var(--sg-tx-3);margin:18px 0 0;text-align:center}
.foot .k{color:var(--sg-tx-2)}

/* ============================================================ EDITOR */
.editor{
  position:fixed;z-index:60;width:216px;
  background:var(--sg-surface-2);border:1px solid var(--sg-line-2);
  box-shadow:0 8px 24px rgba(0,0,0,.6);padding:8px;
  display:flex;flex-direction:column;gap:6px;
}
.editor[hidden]{display:none}
.ed-row{display:flex;gap:6px}
.editor input[type=color]{
  width:40px;height:28px;padding:0;flex:none;cursor:pointer;
  background:var(--sg-sunken);border:1px solid var(--sg-line-2);
}
.editor input[type=text]{
  flex:1;min-width:0;background:var(--sg-sunken);border:1px solid var(--sg-line);
  color:var(--sg-tx);font-size:11px;padding:6px 8px;
}
.editor input[type=text]:focus{outline:none;border-color:var(--sg-accent-dim)}
.editor input.bad{border-color:var(--sg-err)}
.ed-foot{display:flex;align-items:center;gap:6px}
.ed-foot button{
  border:1px solid var(--sg-line-2);padding:5px 10px;font-size:11px;color:var(--sg-tx-2);
}
.ed-foot button:hover{background:var(--sg-accent-ghost);color:var(--sg-tx)}
.ed-del:hover{color:var(--sg-err);border-color:var(--sg-err)}

/* ============================================================ TOAST */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--sg-surface-2);border:1px solid var(--sg-line-2);
  padding:7px 14px;font-family:var(--sg-mono);font-size:11px;color:var(--sg-tx-2);
  z-index:80;box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.toast[hidden]{display:none}

@media(max-width:640px){
  .readout{display:none}
  .topbar{gap:8px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}