/* The sign-in steps (signin.js) in the camp window's Account column: a bar with the way back and "Step 1 of 3",
   then one step at a time. Built on hub.css's window: its buttons, notched corners and the gold cursor, and the
   providers' own brand buttons (.gsi / .sso). Every control is at least 44px, text at least 16px.
   The Lantern UI: the bar stays on the wood, and each step is one parchment card with dark ink and light fields. */

.si { width: 100%; max-width: 560px; margin: 0 auto; display: grid; gap: 8px; text-align: left; }
.si.busy { cursor: progress; }

/* the bar: the way back on the left, where you are on the right */
.si-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.hub .si .btn.si-back { min-height: 44px; padding: 8px 14px; font-size: 1rem; }
.si-count { display: flex; align-items: center; gap: 10px; margin: 0 0 0 auto; font: 700 1rem/1 var(--f-label); color: var(--ink-dim); text-shadow: var(--ol1); }
.si-dots { display: inline-flex; gap: 4px; }
.si-dots i { width: 22px; height: 6px; background: rgba(234, 183, 109, 0.25); }
.si-dots i.on { background: var(--amber-hi); }
.si-dots i.now { background: var(--gold); }

.si-page { display: grid; gap: 10px; padding: 16px 18px 18px; clip-path: var(--notch); background: var(--parch-tex) 0 0 / 128px, var(--parch);
  box-shadow: inset 0 0 0 var(--u) var(--parch-edge); color: var(--parch-ink); }
.hub .si-page, .hub .si-page p, .hub .si-page li, .hub .si-page b { text-shadow: none; }
.si-h { margin: 0; font: 700 1.7rem/1.1 var(--f-label); color: var(--parch-ink); text-shadow: none; text-wrap: balance; }
.si-h:focus { outline: none; }
.si-lede { margin: 0; font: 600 1.05rem/1.45 var(--f-text); color: var(--parch-ink-dim); }
.si-lede b { color: var(--parch-ink); font-weight: 700; overflow-wrap: anywhere; }
.si-or { margin: 2px 0 0; font: 700 1rem/1.2 var(--f-label); color: var(--parch-ink); }
.si-legal { margin: 0; font: 600 1rem/1.45 var(--f-text); color: var(--parch-ink-dim); }
/* inline, so the lines keep their spacing; the padding still gives a finger room to land */
.si-legal a { padding: 10px 0; color: var(--amber-lo); text-decoration: underline; text-underline-offset: 3px; }
.si-legal a:hover { color: var(--amber); }
.si-err { margin: 0; font: 700 1rem/1.35 var(--f-text); color: #a3291f; }
.si-err[hidden] { display: none; }
.si-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* a gate's ways out, under the ways in (signin.js gated) */
.si-outs { margin-top: 14px; padding-top: 14px; border-top: var(--u) solid rgba(82, 41, 25, 0.25); }
.si-outs .btn { flex: 1 1 auto; min-height: 44px; }
.hub .si .btn { min-height: 44px; }
/* a button that waits says so in readable text, not a faded one */
.hub .si .btn:disabled { opacity: 1; background: #8b6a52; color: #f0dcc4; cursor: default; }
/* the quieter buttons (a new code, another email, more ideas): framed, not filled */
.hub .si .btn.si-quiet { background: transparent; box-shadow: inset 0 0 0 var(--u) var(--parch-edge); color: var(--parch-ink); text-shadow: none; font-size: 1rem; }
.hub .si .btn.si-quiet:hover { color: var(--amber); }
.hub .si .btn.si-quiet:disabled { background: transparent; color: var(--parch-ink-dim); box-shadow: inset 0 0 0 var(--u) rgba(82, 41, 25, 0.35); }

/* step 1: the passkey first, marked the quickest, with what it is; then the accounts you have; then email */
.si-pk { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; padding: 14px 16px; clip-path: var(--notch); background: var(--parch-lit);
  box-shadow: inset 0 0 0 var(--u) var(--parch-edge), inset 0 0 0 calc(var(--u) * 2) #78b84a; }
.si-pk-ico { display: grid; place-items: center; width: 52px; height: 52px; flex: none; clip-path: var(--notch); background: var(--well, #5f321d); color: #8fe36a; }
.si-pk-ico svg { width: 30px; height: 30px; }
.si-pk-t p { margin: 4px 0 0; font: 600 1rem/1.4 var(--f-text); color: var(--parch-ink-dim); }
.si-pk-t .si-pk-title { margin: 0; }
.si-pk-title b { font: 700 1.25rem/1.1 var(--f-label); color: var(--parch-ink); }
.si-tag { display: inline-block; margin-left: 8px; padding: 3px 7px; vertical-align: 2px; background: #4f8f2a; color: #fff1d6; font: 700 0.9rem/1 var(--f-label); font-style: normal; text-shadow: none; }
.hub .si .btn.si-pk-go { grid-column: 1 / -1; min-height: 52px; font-size: 1.15rem; }
.si-list { display: grid; gap: 6px; }
.hub .si-list .btn { width: 100%; }
.si-email { display: flex; gap: 8px; }
.si-email input, .si-name-in { flex: 1; min-width: 0; min-height: 48px; padding: 12px 14px; border: var(--u) solid var(--parch-edge); background: #fff6e4; color: var(--parch-ink);
  font: 700 1.1rem/1.2 var(--f-text); box-shadow: inset 0 3px 0 rgba(82, 41, 25, 0.15); }
.si-email input::placeholder, .si-name-in::placeholder { color: rgba(82, 41, 25, 0.5); }
.si-email input:focus, .si-name-in:focus { outline: none; border-color: var(--amber); box-shadow: inset 0 0 0 var(--u) var(--gold); }

/* step 2: the code, one field drawn as six cells (its digits are 1ch wide, 1ch apart); gold marks the next digit */
.si-code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.si-cells { position: relative; display: inline-grid; grid-template-columns: repeat(6, 1.6ch); gap: 0.4ch; margin-right: 1.4ch;
  font: 700 2.3rem/1 var(--f-num); font-variant-numeric: tabular-nums; }
.si-cells i { height: 1.9em; clip-path: var(--notch); background: #fff6e4; box-shadow: inset 0 0 0 var(--u) var(--parch-edge), inset 0 -4px 0 rgba(82, 41, 25, 0.2); }
.si-cells i.on { box-shadow: inset 0 0 0 3px var(--amber), inset 0 -4px 0 rgba(255, 214, 48, 0.6); }
.si-code-in { position: absolute; left: 0; top: 0; width: 13ch; height: 100%; margin: 0; padding: 0 0 0 0.3ch; border: 0; background: transparent; color: var(--parch-ink);
  font: inherit; line-height: 1.9em; letter-spacing: 1ch; outline: none; caret-color: var(--amber); }
.hub .si .si-code-in[data-nav]:focus { box-shadow: none; }   /* the gold cell is this field's cursor */
.si-wait { display: grid; justify-items: center; gap: 12px; padding: 18px 0; text-align: center; }
.si-wait .si-pk-ico { width: 88px; height: 88px; }
.si-wait .si-pk-ico svg { width: 52px; height: 52px; }
.si-wait .si-lede { max-width: 36ch; }

/* step 3: your miner on a nameplate that takes the name as you type it */
.si-stage { display: grid; justify-items: center; gap: 6px; }
.si-fig { position: relative; overflow-x: clip; flex: none; margin-top: var(--over, 0px); }   /* room for a tall hat (profile.js) */
.si-plate { margin: 0; max-width: 100%; padding: 7px 18px 8px; overflow-wrap: anywhere; clip-path: var(--notch); background: var(--wood-tex) 0 0 / 128px, var(--win);
  box-shadow: inset 0 0 0 var(--u) var(--win-edge); font: 700 1.35rem/1.1 var(--f-label); color: var(--gold); }
.hub .si-page .si-plate { text-shadow: var(--ol1); }
.si-name { display: grid; gap: 8px; }
.si-name .si-err { margin-top: -2px; }
.si-rules { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; padding: 0; list-style: none; font: 600 1rem/1.35 var(--f-text); color: var(--parch-ink-dim); }
.si-rules li.ok { color: #2f6b1c; }
.si-rules[hidden] { display: none; }
.si-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.si-ideas .si-or { margin: 0 4px 0 0; }
.hub .si .btn.si-idea { font-size: 1rem; }
.hub .si .btn.si-claim { justify-self: start; min-height: 48px; font-size: 1.1rem; }

/* done: what's kept */
.si-kept { display: grid; gap: 6px; margin: 0; padding: 4px 0; list-style: none; }
.si-kept li { position: relative; padding-left: 26px; font: 600 1rem/1.35 var(--f-text); color: var(--parch-ink-dim); }
.si-kept li::before { content: "✓"; position: absolute; left: 2px; color: #2f6b1c; font-weight: 700; }
.si-kept b { color: var(--parch-ink); }
.hub .si .btn.si-done { justify-self: start; min-height: 48px; }

@media (max-width: 760px) {
  .si-h { font-size: 1.45rem; }
  .si-email { flex-wrap: wrap; }
  .si-email input, .hub .si-email .btn { flex: 1 1 100%; }
  .si-cells { font-size: 2rem; }
}

/* why the steps opened, when something else opened them (the lake's gate, lakegate.js) */
.hub .si-note, .si-note { margin: 0 0 4px; padding: 10px 14px; clip-path: var(--notch); background: var(--parch-lit);
  box-shadow: inset 0 0 0 var(--u, 2px) var(--parch-edge), inset calc(var(--u, 2px) * 3) 0 0 var(--amber); color: var(--parch-ink); font: 600 1rem/1.4 var(--f-text); text-shadow: none; }