/* The paste pad: a full page that is mostly one textarea. */

body.padpage {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background:
    radial-gradient(1200px 600px at 50% -10%, #16211b 0%, transparent 60%),
    #0d1117;
  color: #e6edf3;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

#pad {
  flex: 1;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 20px;
  box-sizing: border-box;
}

#padhead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 18px;
}

#mark { color: #7ee787; font-size: 13px; }

#padhead h1 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  margin: 0;
  color: #8b949e;
}

#badge {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(139, 148, 158, .35);
  color: #8b949e;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
#badge[data-kind="empty"]    { opacity: .55; }
#badge[data-kind="html"]     { color: #7ee787; border-color: rgba(126,231,135,.5); background: rgba(126,231,135,.09); }
#badge[data-kind="markdown"] { color: #79c0ff; border-color: rgba(121,192,255,.5); background: rgba(121,192,255,.09); }
#badge[data-kind="jsx"],
#badge[data-kind="tsx"]      { color: #d2a8ff; border-color: rgba(210,168,255,.5); background: rgba(210,168,255,.09); }
#badge[data-kind="svg"]      { color: #ff7b72; border-color: rgba(255,123,114,.5); background: rgba(255,123,114,.09); }
#badge[data-kind="xml"]      { color: #ffa657; border-color: rgba(255,166,87,.5); background: rgba(255,166,87,.09); }
#badge[data-kind="css"]      { color: #e3b341; border-color: rgba(227,179,65,.5); background: rgba(227,179,65,.09); }
#badge[data-kind="json"]     { color: #56d4dd; border-color: rgba(86,212,221,.5); background: rgba(86,212,221,.09); }

#boxwrap {
  flex: 1;
  display: flex;
  border: 1px solid rgba(139, 148, 158, .28);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(13, 17, 23, .6);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#boxwrap:focus-within {
  border-color: rgba(126, 231, 135, .55);
  box-shadow: 0 0 0 3px rgba(126, 231, 135, .12);
}

#box {
  flex: 1;
  resize: none;
  border: 0;
  outline: 0;
  padding: 22px;
  background: transparent;
  color: #e6edf3;
  caret-color: #7ee787;
  font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#box::placeholder { color: #484f58; }
#box::selection { background: rgba(126, 231, 135, .25); }

#padfoot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
}

#go {
  font: 600 13px/1 inherit;
  color: #0d1117;
  background: #7ee787;
  border: 0;
  border-radius: 7px;
  padding: 9px 22px;
  cursor: pointer;
}
#go:hover:not(:disabled) { filter: brightness(1.08); }
#go:active:not(:disabled) { transform: translateY(1px); }
#go:disabled { opacity: .35; cursor: default; }

#hint {
  font-size: 12px;
  color: #6e7681;
}
#hint .sep { margin: 0 2px; opacity: .5; }

kbd {
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #8b949e;
  background: rgba(139, 148, 158, .14);
  border: 1px solid rgba(139, 148, 158, .3);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 5px;
}

#history { margin-top: 18px; }
#history h2 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8b949e; margin: 0 0 8px; }
#histlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#histlist li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(139,148,158,.22);
  background: rgba(139,148,158,.08); cursor: pointer;
}
#histlist li:hover { background: rgba(139,148,158,.16); }
#histlist .hk {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(139,148,158,.3); color: #8b949e;
}
#histlist .ht { flex: 1; font-size: 12px; color: #e6edf3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#histlist .hd { font-size: 11px; color: #6e7681; }

#boxwrap.dragover { border-color: rgba(126,231,135,.7); box-shadow: 0 0 0 3px rgba(126,231,135,.18); }