/* Styles for ui/core.js's requireName() prompt — the small "your name" dialog that interrupts one
   action, asks once, then re-runs it. Deliberately separate from ui/welcome.js's full welcome
   dialog (which index.html already links via ui/board.css's .welcome/.welcome-bg): this is a
   one-field nudge, not a second onboarding screen, so it gets its own tiny stylesheet rather than
   adding to a file this session does not own.

   NEEDS ONE LINE ADDED TO index.html BY WHOEVER MERGES THIS: a <link rel="stylesheet"
   href="ui/identity.css"> beside the other ui/*.css links — see the session report.

   Tokens only, from theme.css (owned elsewhere) — no colours or sizes invented here. */

.name-prompt-bg {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4, 1rem);
  z-index: 32; /* above .panel-bg (20) and .welcome-bg (25), below nothing else on the page */
}

.name-prompt {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  width: min(20rem, 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  padding: var(--s4, 1rem);
  display: grid;
  gap: var(--s3, .6rem);
}

.name-prompt h3 {
  margin: 0;
  padding-right: 1.4rem; /* room for the close control */
  font-size: var(--text-base);
  font-weight: 700;
}

.name-prompt input[type="text"] {
  padding: .45rem .6rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font: inherit;
  color: inherit;
}

.name-prompt-actions {
  display: flex;
  justify-content: flex-end;
}

.name-prompt-close {
  position: absolute;
  top: .5rem;
  right: .6rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--graphite);
  padding: .1rem .35rem;
}
.name-prompt-close:hover {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .name-prompt-bg {
    transition: none;
  }
}

/* The optional contact group in the welcome dialog is a <details> now (folded by default). */
details.welcome-contact > summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
details.welcome-contact[open] > summary { margin-bottom: .4rem; }