/* What every tool page has: the lede, the drop zone, fields, the files
   area and the action buttons. The page layout is in page.css. */
.lede{margin:16px 0 28px;font-size:16px;line-height:1.55;color:var(--muted);max-width:56ch}

/* Drop zone */
.drop{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:40px 20px;text-align:center;cursor:pointer;
  border-style:dashed;border-width:1.5px;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop svg{width:32px;height:32px;color:var(--cyan);margin-bottom:4px}
.drop b{font-size:17px}
.drop span{font-size:14px;color:var(--muted)}
.drop u{text-decoration-color:var(--violet);text-underline-offset:3px}
.drop:hover,.drop.over{border-color:rgba(168,85,247,.6);box-shadow:0 14px 40px -16px rgba(168,85,247,.55)}
.drop.over{background:rgba(168,85,247,.08)}
.drop:focus-within{outline:2px solid var(--cyan);outline-offset:3px}

.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* Fields */
.field{display:flex;flex-direction:column;gap:8px}
.field .label{display:flex;justify-content:space-between;align-items:baseline}
.field output{font:600 12px var(--mono);letter-spacing:0;text-transform:none;color:var(--fg)}
.field input[type=text]{
  padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:rgba(8,10,18,.6);color:var(--fg);
  font:400 15px var(--sans);
}
.field input[type=text]::placeholder{color:var(--faint)}
.field input[type=text]:focus{outline:none;border-color:var(--cyan)}
.field input.invalid{border-color:var(--pink)}
/* A colour picker beside its label */
.field-color{flex-direction:row;align-items:center;justify-content:space-between}
.field-color input{
  width:56px;height:34px;padding:2px;border-radius:8px;
  border:1px solid var(--line);background:rgba(8,10,18,.6);cursor:pointer;
}
.field select{
  padding:9px 12px;border-radius:10px;
  border:1px solid var(--line);background:rgba(8,10,18,.6);color:var(--fg);
  font:400 15px var(--sans);
}
.field select:focus{outline:none;border-color:var(--cyan)}
.field option{background:#10142a;color:var(--fg)}
.field select:disabled{opacity:.5;cursor:default}

/* Where the files are listed */
.files{margin-top:12px}
.files-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}

@media (max-width:480px){
  .drop{padding:32px 16px}
  .actions .btn{flex:1 1 100%}
}