/* Recover your locked coins. Two steps, and the second one is hidden until the first succeeds:
   there is no reason to show somebody a box asking for their key before we know there is anything
   to unlock. The timer is the largest thing on the page, because for most of four years it is the
   only thing anybody comes here to see. */

.un-wrap { max-width: 720px; margin: 0 auto; padding: 56px 22px 90px; }

.un-head { margin-bottom: 40px; }
.un-eyebrow {
  font-size: 11px; letter-spacing: .18em; font-weight: 700;
  color: var(--accent, #4fd1c5); margin: 0 0 10px;
}
.un-head h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.08; margin: 0 0 14px; text-wrap: balance; }
.un-lede { font-size: 16px; line-height: 1.6; opacity: .82; max-width: 60ch; margin: 0; }

.un-step {
  border-top: 1px solid rgba(128, 128, 128, .2);
  padding-top: 26px;
  margin-top: 30px;
}
.un-step h2 { font-size: 20px; margin: 0 0 10px; }
.un-say { font-size: 14.5px; line-height: 1.6; opacity: .78; margin: 0 0 16px; max-width: 58ch; }

.un-label {
  display: block; font-size: 12px; letter-spacing: .04em; font-weight: 600;
  margin: 14px 0 6px; opacity: .8;
}
.un-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
  padding: 10px 12px; border-radius: 7px;
  border: 1px solid rgba(128, 128, 128, .32);
  background: rgba(128, 128, 128, .07); color: inherit;
}
.un-input:focus { outline: 2px solid var(--accent, #4fd1c5); outline-offset: 1px; border-color: transparent; }
.un-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

.un-btn {
  margin-top: 14px; font: inherit; font-size: 15px; font-weight: 650;
  padding: 11px 20px; border-radius: 8px; border: 1px solid rgba(128, 128, 128, .4);
  background: transparent; color: inherit; cursor: pointer;
}
.un-btn:hover { border-color: var(--accent, #4fd1c5); }
.un-btn.un-go { background: var(--accent, #4fd1c5); color: #06201d; border-color: transparent; }
.un-btn[disabled] { opacity: .4; cursor: not-allowed; }

.un-found, .un-result {
  margin-top: 18px; border: 1px solid rgba(128, 128, 128, .25);
  border-radius: 9px; padding: 15px 17px; font-size: 13.5px;
}

.un-kv {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 6px 0; border-bottom: 1px solid rgba(128, 128, 128, .13);
}
.un-kv:last-child { border-bottom: 0; }
.un-kv span:first-child { opacity: .68; }
.un-kv span:last-child {
  font-variant-numeric: tabular-nums; text-align: right; font-weight: 600;
  word-break: break-all;
}
.un-kv.lead span:last-child { font-size: 17px; }

/* --- the timer, which is the whole point of the page for four years --------------------------- */

.un-timer {
  margin-top: 18px; padding: 22px 16px; border-radius: 9px; text-align: center;
  border: 1px solid rgba(128, 128, 128, .25);
}
.un-timer.waiting { border-color: rgba(220, 160, 60, .45); background: rgba(220, 160, 60, .06); }
.un-timer.open { border-color: rgba(80, 200, 140, .5); background: rgba(80, 200, 140, .08); }

.un-timer-num {
  font-size: clamp(26px, 6vw, 38px); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.un-timer.open .un-timer-num { color: #56c890; }
.un-timer-sub { margin-top: 8px; font-size: 13px; opacity: .72; }

/* --- the one place a key is mentioned --------------------------------------------------------- */

.un-warn {
  border: 1px solid rgba(80, 200, 140, .4); background: rgba(80, 200, 140, .07);
  border-radius: 8px; padding: 13px 15px; font-size: 13.5px; line-height: 1.6;
}

.un-note { font-size: 13px; opacity: .7; line-height: 1.6; margin: 12px 0 0; }
.un-err { color: #e07070; font-size: 13.5px; margin: 0; }

.un-foot {
  margin-top: 56px; padding-top: 18px;
  border-top: 1px solid rgba(128, 128, 128, .18);
  font-size: 12.5px; opacity: .62; line-height: 1.7;
}
.un-foot code {
  display: block; margin-top: 6px; padding: 8px 10px; border-radius: 6px;
  background: rgba(128, 128, 128, .12); font-size: 11.5px; word-break: break-all;
}

/* The release section. Deliberately plain: somebody reading it has already had a bad day. */
#uk-release { width: 100%; font: 12px/1.6 ui-monospace, Menlo, monospace; padding: 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--txt); }
#uk-release-sec .uk-row { display: flex; gap: 10px; margin-top: 12px; }
.uk-ok { color: var(--ok); } .uk-bad { color: var(--danger); } .uk-warn { color: #ffc93c; }