/* The unlock page. Same palette as DESIGN.md; self-hosted Source Sans 3 for headings and text, as DESIGN.md says
   until the display face can be self-hosted (no third parties here). */
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin-var.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
:root {
  --vault: #0E3A2D; --vault-raised: #134A39; --vault-lid: #16523F; --brass: #C9A54B; --brass-hover: #D4B25C;
  --brass-deep: #9C7F33; --ivory: #F1EDE3; --muted: #CFD6CC; --ok: #9ED9B5; --wait: #E8B860; --bad: #F2938A;
  --display: "Source Sans 3", system-ui, sans-serif; --body: "Source Sans 3", system-ui, sans-serif;
  accent-color: var(--brass); caret-color: var(--brass);
}
* { box-sizing: border-box; margin: 0; }
html, body { background: var(--vault); color: var(--ivory); }
body { font: 18px/1.55 var(--body); min-height: 100vh; -webkit-font-smoothing: antialiased; }
::selection { background: var(--brass); color: var(--vault); }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.top { padding-top: 28px; padding-bottom: 28px; }
.logo { display: inline-flex; align-items: center; gap: 12px; font: 700 26px var(--display); }
.mark { width: 30px; height: 30px; border: 2px solid var(--brass); border-radius: 6px; position: relative; }
.mark::after { content: ""; position: absolute; left: -2px; right: -2px; top: 9px; border-top: 2px solid var(--brass); }
h1 { font: 700 clamp(2rem, 5vw, 3rem)/1.08 var(--display); letter-spacing: -0.02em; margin-top: 12px; }
h2 { font: 700 1.35rem/1.2 var(--display); margin: 32px 0 8px; }
.lede { font-size: 19px; color: var(--muted); margin-top: 14px; max-width: 46ch; }
p + p { margin-top: 10px; }
.btn { display: inline-block; font: 600 18px var(--body); border: 0; border-radius: 10px; padding: 16px 26px; min-height: 52px;
       background: var(--brass); color: var(--vault); cursor: pointer; text-decoration: none; margin-top: 28px; }
.btn:hover { background: var(--brass-hover); }
.btn[aria-busy="true"] { cursor: progress; }
.btn-quiet { font: 600 16px var(--body); color: var(--ivory); background: transparent; border: 1px solid rgba(241,237,227,.45);
             border-radius: 10px; padding: 10px 18px; min-height: 44px; cursor: pointer; margin-top: 16px; }
a { color: var(--ivory); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }   /* headings focused for screen readers, not keyboard users */
.ok { color: var(--ok); } .wait { color: var(--wait); } .bad { color: var(--bad); }
.message { margin-top: 22px; padding: 16px 18px; border-radius: 10px; background: var(--vault-raised); max-width: 52ch; }
.field { display: grid; gap: 6px; margin-top: 22px; font-weight: 600; font-size: 15px; max-width: 520px; }
.field input { font: 22px/1.3 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: var(--ivory);
               background: var(--vault-raised); border: 1px solid rgba(241,237,227,.4); border-radius: 6px; padding: 12px; }
.steps { color: var(--muted); font-size: 15px; margin-top: 6px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The backup sheet: on screen a white page; printed, the only thing on the paper. */
.sheet { margin-top: 28px; background: #fff; color: #14231C; border-radius: 14px; padding: 36px 32px; max-width: 640px; }
.sheet h2 { margin: 0 0 4px; color: #0E3A2D; font-size: 1.6rem; }
.sheet .firm { font-size: 15px; color: #5A6660; }
.sheet .code { font: 600 clamp(20px, 5vw, 30px)/1.4 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em;
               margin: 26px 0; padding: 18px; border: 2px solid #0E3A2D; border-radius: 10px; text-align: center;
               word-spacing: .3em; }
.sheet ol { padding-left: 20px; font-size: 15px; } .sheet li + li { margin-top: 6px; }
@media print {
  @page { margin: 18mm; }
  body { background: #fff; }
  body > *:not(main), main > *:not(.sheet) { display: none !important; }
  .sheet { margin: 0; padding: 0; max-width: none; }
}
/* A person's key code, read aloud before one adds the other (E12) */
.code { font: 600 22px/1.4 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; }
.people { list-style: none; padding: 0; margin: 0 0 24px; }
.people li { margin: 8px 0; }