/* Small, dependency-free interface for a single-purpose tool. */
:root {
  color-scheme:light;
  font-family:Arial,Helvetica,sans-serif;
  color:#202020;
  background:#fafafa
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  font-size:15px;
  line-height:1.5
}

a {
  color:#174c7a;
  text-underline-offset:3px
}

a:hover {
  color:#0b2f4f
}

button,input,textarea,select {
  font:inherit
}

.page {
  width:min(100% - 40px,680px);
  margin:0 auto
}

.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #ccc;
  padding:19px 0 15px;
  gap:16px
}

.site-name {
  text-decoration:none;
  color:#202020;
  font-weight:700;
  font-size:16px
}

.environment {
  font:11px/1.3 Arial,Helvetica,sans-serif;
  letter-spacing:.07em;
  border:1px solid #bbb;
  padding:4px 7px;
  color:#555
}

main {
  padding:30px 0 42px
}

h1 {
  font-size:29px;
  line-height:1.2;
  letter-spacing:-.025em;
  font-weight:700;
  margin:0 0 17px
}

h2 {
  font-size:17px;
  margin:0 0 16px
}

p {
  margin:0 0 16px;
  max-width:620px
}

section {
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #d5d5d5
}

label {
  display:block;
  font-size:13px;
  font-weight:700;
  margin:0 0 6px
}

input,select,textarea {
  display:block;
  width:100%;
  border:1px solid #a7a7a7;
  border-radius:2px;
  background:white;
  color:#222;
  padding:10px 11px
}

textarea {
  overflow-wrap:anywhere;
  resize:vertical
}

button,.button {
  background:#242424;
  color:white;
  border:1px solid #242424;
  border-radius:2px;
  display:inline-block;
  text-decoration:none;
  padding:10px 15px;
  min-height:42px;
  font-weight:600;
  cursor:pointer
}

button:hover,.button:hover {
  background:#3e3e3e;
  color:white
}

button.plain {
  border:0;
  background:transparent;
  color:#174c7a;
  padding:0;
  min-height:auto;
  font-weight:400;
  text-decoration:underline;
  text-underline-offset:3px
}

button.destructive {
  color:#a02020
}

.form {
  max-width:580px
}

.form button {
  margin-top:16px
}

.narrow {
  max-width:390px
}

.form-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 165px;
  gap:14px
}

.record {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding:13px 0;
  border-top:1px solid #e2e2e2;
  font-size:14px
}

.record strong {
  font-weight:600
}

.small {
  font-size:13px;
  color:#555
}

.record .small {
  margin-top:3px
}

.notice {
  border:1px solid #c6c6c6;
  padding:12px 14px;
  background:#f1f1f1;
  margin:22px 0;
  font-size:13px
}

.caution {
  border-color:#c7b6a1;
  background:#fff8ed
}

.secondary-actions {
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:24px;
  flex-wrap:wrap
}

footer {
  font-size:12px;
  color:#666;
  border-top:1px solid #ccc;
  padding:15px 0 28px
}

:focus-visible {
  outline:2px solid #145b9a;
  outline-offset:3px
}

@media(max-width:520px) {
  .page {
    width:min(100% - 32px,680px)
  }
  main {
    padding-top:25px
  }
  .form-row {
    grid-template-columns:1fr
  }
  .record {
    align-items:flex-start
  }
  h1 {
    font-size:27px
  }
}

.invite-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin:12px 0 22px
}

.link-details {
  margin:0 0 23px;
  border-top:1px solid #dedede;
  border-bottom:1px solid #dedede;
  padding:12px 0
}

.link-details summary {
  cursor:pointer;
  color:#174c7a;
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:14px
}

.link-details label {
  margin-top:17px
}

.link-details textarea {
  margin-bottom:8px;
  max-width:100%
}

/* Keep button taps from landing twice while the server is processing. */
button:active {
  transform:translateY(1px)
}

/* Controls page: a single centered column. */
.controls {
  max-width: 480px;
  margin: 10px auto 0;
  padding: 36px 36px 28px;
  border: 1px solid #dedede;
  border-radius: 10px;
  background: #fff;
  text-align: center;
}

.controls h1 {
  margin: 0 0 6px;
}

.controls .account {
  margin: 0 0 30px;
  max-width: none;
  font-size: 13px;
  color: #666;
}

.controls .press-form {
  margin: 0;
}

.controls .press-form button {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border-radius: 5px;
  font-size: 16px;
}

.controls .press-form button:disabled {
  cursor: wait;
  opacity: .65;
  transform: none;
}

.controls .press-status {
  min-height: 21px;
  margin: 13px auto 0;
  max-width: none;
  font-size: 13px;
  color: #333;
}

.controls .cooldown {
  margin: 0;
  max-width: none;
  font-size: 12px;
  color: #777;
}

.controls .secondary-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid #e9e9e9;
  font-size: 14px;
}

.controls .secondary-actions form {
  margin: 0;
}

@media (max-width: 520px) {
  .controls {
    margin-top: 0;
    padding: 30px 20px 24px;
  }
}