/* OBEINSON FREQUENCY X — the Menu's PIN prompt.
 *
 * Built by menu-lock.js. It borrows the app's own panel colours rather than
 * inventing any, so it looks like the dialogs beside it in both themes.
 */

dialog.obnMenuLock {
  width: min(360px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line, #22304a);
  border-radius: 18px;
  background: var(--panel, #121a2b);
  color: var(--text, #eaf2fb);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

dialog.obnMenuLock::backdrop {
  background: rgba(8, 14, 24, .72);
}

.obnMenuLockForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 20px;
}

.obnMenuLock h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

.obnMenuLock p {
  margin: 0;
  font-size: 14px;
  color: var(--muted, #9fb0c6);
}

/* Light theme: the app's --muted measures 4.12:1 on a light panel, under AA.
   #55687e is the value np-phone.css and live-stats.css already use for this. */
:root[data-theme="light"] .obnMenuLock p {
  color: #55687e;
}

#obnMenuLockPin {
  /* 16px or iOS zooms the whole page when the field takes focus */
  font-size: 16px;
  letter-spacing: .4em;
  text-align: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line, #22304a);
  background: var(--bg, #0b111c);
  color: var(--text, #eaf2fb);
  width: 100%;
  box-sizing: border-box;
}

#obnMenuLockPin:focus-visible {
  outline: 2px solid var(--dial-head, #00e1ff);
  outline-offset: 2px;
}

.obnMenuLockMsg:empty {
  display: none;
}

.obnMenuLockMsg.bad {
  color: var(--dial-bad, #ff5d58);
}

.obnMenuLockRow {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}

/* Layout only. Colour is the app's: `button.primary` and
   `button:not(.primary)` are themed for both schemes and already carry the
   contrast work, and both out-specify anything written here — which is how the
   first attempt at a cyan Unlock button ended up the same grey as Cancel. */
.obnMenuLockRow button {
  flex: 1;
  /* a comfortable target on a phone; the app's own --tap where it is set */
  min-height: var(--tap, 44px);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.obnMenuLockRow button:focus-visible {
  outline: 2px solid var(--dial-head, #00e1ff);
  outline-offset: 2px;
}