/* Design review entry: the quiet button under the hero name and its password dialog
   (built by js/design-review.js). Same label type as the nav: Roboto 12px, uppercase. */
.dr-open {
  display: inline-flex; align-items: center; margin: 18px 0 0; padding: 9px 16px;
  background: none; border: 1px solid var(--ink); border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 400; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink);
  transition: opacity .3s ease;
}
.dr-open:hover { opacity: .55; }
.flow-layout .dr-open { min-height: 44px; margin-top: 14px; }

.dr-dialog {
  width: min(400px, calc(100vw - 32px)); max-width: none; padding: 0;
  border: 1px solid var(--ink); border-radius: 0; background: var(--bg); color: var(--ink);
  overscroll-behavior: contain;
}
.dr-dialog::backdrop { background: rgba(255, 255, 255, .86); }
.dr-form { position: relative; display: flex; flex-direction: column; padding: 32px; }
.dr-title { margin: 0; padding-right: 72px; font-size: 32px; font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
.dr-label {
  margin: 28px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--label);
}
.dr-input {
  width: 100%; margin: 8px 0 0; padding: 10px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font-family: inherit; font-size: 16px; line-height: 1.4;
}
.dr-input:focus { outline: none; padding-bottom: 9px; border-bottom-width: 2px; }
.dr-error { min-height: 1.5em; margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.dr-submit, .dr-close {
  font-family: inherit; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer; min-height: 44px;
}
.dr-submit {
  align-self: flex-start; margin: 8px 0 0; padding: 10px 22px;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--bg);
}
.dr-submit:disabled { opacity: .45; cursor: default; }
.dr-close {
  position: absolute; top: 18px; right: 18px; padding: 10px 14px;
  border: 0; background: none; color: var(--ink);
}
.dr-close:hover { opacity: .55; }
@media (max-width: 480px) {
  .dr-form { padding: 24px; }
  .dr-title { font-size: 28px; }
  .dr-close { top: 10px; right: 10px; }
}