/* Account setup (app/js/screens/setup.js) and the header gear. */
.board { position: relative; }
.gear {
  position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: var(--tap); height: var(--tap);
  padding: 0; border: 0; border-radius: 12px; background: none; color: var(--frost); cursor: pointer;
  transition: transform 160ms var(--ease-out), color 160ms var(--ease-out);
}
.gear svg { width: 22px; height: 22px; }
.gear:active { transform: scale(var(--press)); color: var(--ice); }
.gear:focus-visible, .setup-save:focus-visible, .setup-choice:focus-visible, .setup-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.setup-back {
  position: fixed; inset: 0; z-index: 25; overflow-y: auto; background: rgba(3,8,20,.86);
  padding: calc(var(--safe-top) + 14px) 16px calc(var(--safe-bottom) + 16px);
  opacity: 0; transition: opacity 200ms var(--ease-out);
}
.setup-back.on { opacity: 1; }
.setup {
  display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 398px; margin: 0 auto;
  padding: 18px 16px 16px; border: 1px solid var(--seam); border-radius: 18px; background: var(--boards);
  transform: translateY(12px); transition: transform 240ms var(--ease-out);
}
.setup-back.on .setup { transform: none; }
.setup-title { margin: 0; font: 900 30px/1 var(--font-display); }
.setup-title:focus { outline: none; }
.setup-sub { margin: 0; color: var(--frost); font-size: 14px; }
.setup-brand { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--seam); }
.setup-brand-name { margin: 0; font: 800 20px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.setup-field { display: flex; flex-direction: column; gap: 6px; }
.setup-label { font-weight: 700; font-size: 14px; }
.setup-label-brand { color: var(--frost); font-weight: 500; }
.setup-row { display: flex; align-items: center; gap: 8px; }
.setup-input {
  flex: 1; min-width: 0; height: var(--tap); padding: 0 12px; border: 1px solid var(--seam); border-radius: 12px;
  background: var(--boards-2); color: var(--ice); font: 500 16px var(--font-body);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.setup-input::placeholder { color: var(--dim); }
.setup-input:focus { outline: none; border-color: #7fc4ff; box-shadow: 0 0 0 3px rgba(127,196,255,.2); }
.setup-input[aria-invalid="true"] { border-color: #ff8a96; }
.setup-tick { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--chem); }
.setup-tick[hidden] { display: none; }
.setup-tick svg { width: 20px; height: 20px; }
.setup-save {
  flex: none; min-width: 64px; height: var(--tap); padding: 0 14px; border: 0; border-radius: 12px;
  background: var(--ice); color: var(--rink); font: 700 15px var(--font-body); cursor: pointer;
  transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.setup-save:active { transform: scale(var(--press)); }
.setup-save:disabled { opacity: .6; cursor: default; transform: none; }
.setup-msg { margin: 0; color: #ff8a96; font-size: 13px; }
.setup-msg:empty { display: none; }
.setup-ask { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--seam); border-radius: 12px; background: var(--boards-2); }
.setup-ask-q { margin: 0; font-size: 14px; font-weight: 600; }
.setup-choices { display: flex; gap: 8px; }
.setup-choice {
  flex: 1; min-height: var(--tap); border: 1px solid var(--seam); border-radius: 12px; background: var(--boards);
  color: var(--ice); font: 600 14px var(--font-body); cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.setup-choice:active { transform: scale(var(--press)); }
.setup-choice[aria-pressed="true"] { border-color: var(--chem); box-shadow: 0 0 0 1px var(--chem); }
.setup-done { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .setup-back .setup { transform: none; }
}