/* Profile gate — "who's gathering round the hearth". Warm, calm, oversized. */
.profiles {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  padding: calc(var(--bar) + 6vh) 1.2rem 3rem; overflow: auto;
}
.profiles[hidden] { display: none; }
.profiles__inner { text-align: center; max-width: 640px; width: 100%; }
.profiles__title { font-size: var(--step-3); margin-bottom: 2.2rem; }
.profiles__grid {
  display: flex; flex-wrap: wrap; gap: clamp(16px, 4vw, 30px); justify-content: center;
}
.pf {
  background: none; border: 0; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: .7rem; width: clamp(92px, 26vw, 128px);
}
.pf__disc {
  width: clamp(92px, 26vw, 128px); height: clamp(92px, 26vw, 128px); border-radius: 26%;
  display: grid; place-items: center; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2rem, 8vw, 3rem); color: #241005;
  border: 2px solid transparent; transition: transform .2s var(--ease), box-shadow .2s;
  box-shadow: 0 8px 26px rgba(0,0,0,.4);
}
.pf:hover .pf__disc, .pf:focus-visible .pf__disc {
  transform: translateY(-5px) scale(1.02); box-shadow: 0 14px 34px var(--glow);
}
.pf__disc[data-kind="kids"] { background: linear-gradient(150deg, #9fd0a8, #5fae7a); }
.pf__name { font-size: var(--step-0); color: var(--ink-dim); }
.pf__name .kidtag { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--good); margin-top: .1rem; }
.pf--add .pf__disc {
  background: transparent; border: 2px dashed var(--line); color: var(--ink-mute); font-size: 2.4rem; box-shadow: none;
}
.profiles__manage {
  margin-top: 2.6rem; background: none; border: 1px solid var(--line); color: var(--ink-mute);
  border-radius: 999px; padding: .5rem 1.2rem; cursor: pointer; letter-spacing: .04em; font-size: var(--step--1);
}
.profiles__manage:hover { color: var(--ink); border-color: var(--ember); }

/* profile editor rows (inside a sheet) */
.pedit { padding: clamp(18px,4vw,28px); }
.pedit h2 { font-size: var(--step-2); margin-bottom: 1rem; }
.field { margin-bottom: 1.1rem; }
.field > label { display: block; font-size: var(--step--1); color: var(--ink-dim); margin-bottom: .4rem; letter-spacing: .02em; }
.field input[type=text], .field select {
  width: 100%; background: var(--bg-card); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius-sm); padding: .6rem .8rem;
}
.switch { display: flex; align-items: center; gap: .6rem; }
.genrepick { display: flex; flex-wrap: wrap; gap: .4rem; }
.row-actions { display: flex; gap: .6rem; margin-top: 1.4rem; }
.btn-primary {
  border: 0; cursor: pointer; border-radius: 999px; padding: .7rem 1.3rem; font-weight: 700; color: #241005;
  background: linear-gradient(180deg, var(--ember-soft), var(--ember)); box-shadow: 0 6px 20px var(--glow);
}
.btn-primary:hover { transform: translateY(-1px); }