/* Upload, login and admin pages. login.html must also render on iOS 10 Safari. */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #16121f;
  color: #f4f0fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
}

a { color: #ffd166; }

h1 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; }

.narrow { max-width: 480px; margin: 0 auto; padding: 28px 16px 48px; }

.lead { margin: 0 0 24px; color: #c9bfdc; }

.field { display: block; margin-bottom: 16px; }
.field span { display: block; margin-bottom: 6px; font-weight: 600; }
.field em { font-weight: 400; font-style: normal; color: #a99dbf; }
.field input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #4a3f5e;
  border-radius: 10px;
  background: #241d33;
  color: #fff;
  font-size: 17px; /* >= 16px keeps iOS from zooming in on focus */
}
.field input:focus { outline: 2px solid #ffd166; outline-offset: 1px; border-color: transparent; }

.pick-button, .button {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 20px 16px;
  border: 0;
  border-radius: 14px;
  background: #ef476f;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
}
.button { padding: 14px 16px; font-size: 18px; }
.pick-button:active, .button:active { background: #d63a60; }
.pick-icon { display: block; font-size: 40px; line-height: 1.1; margin-bottom: 4px; }
.busy .pick-button { opacity: 0.5; pointer-events: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hint { margin: 10px 0 0; color: #a99dbf; font-size: 15px; text-align: center; }

.status { margin: 20px 0 0; padding: 14px 16px; border-radius: 10px; font-weight: 600; }
.status-ok { background: #1f4d3a; color: #b8f5d6; font-size: 20px; text-align: center; }
.status-error { background: #5a1f2c; color: #ffd0da; }

.uploads { list-style: none; margin: 20px 0 0; padding: 0; }
.upload {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name msg" "bar bar";
  gap: 6px 12px;
  padding: 12px 0;
  border-bottom: 1px solid #2f2742;
  font-size: 15px;
}
.upload-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-msg { grid-area: msg; color: #c9bfdc; text-align: right; }
.upload progress { grid-area: bar; width: 100%; height: 8px; accent-color: #ef476f; }
.upload.done .upload-msg { color: #8ee4b5; }
.upload.failed .upload-msg { color: #ff9db3; grid-column: 1 / -1; text-align: left; }
.upload.failed { grid-template-areas: "name name" "msg msg"; }
.upload.failed progress { display: none; }

.login-form { margin-top: 20px; }

/* Admin */
.admin-header { padding: 20px 16px 8px; }
.admin-header p { margin: 0; color: #c9bfdc; }
.admin .empty { padding: 0 16px; }
.grid {
  list-style: none;
  margin: 0;
  padding: 12px 16px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.card {
  display: flex;
  flex-direction: column;
  background: #241d33;
  border-radius: 12px;
  overflow: hidden;
}
.card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #000; }
.card-body { flex: 1; padding: 8px 10px; font-size: 14px; overflow-wrap: anywhere; }
.card-body p { margin: 2px 0; color: #ddd3ee; }
.card-body time { display: block; color: #a99dbf; font-size: 13px; }
.tag { display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: 4px; background: #3a2f52; font-size: 12px; }
.delete {
  margin: 0 10px 10px;
  padding: 10px;
  border: 1px solid #ef476f;
  border-radius: 8px;
  background: transparent;
  color: #ff9db3;
  font-size: 15px;
  font-weight: 600;
}
.delete.armed { background: #ef476f; color: #fff; }
.delete:disabled { opacity: 0.6; }