/* ─────────────────────────────────────────────────────────────────────────────
   "Who's watching?" — the household profile screen (renderer/profiles/who.js).

   Direction: THE KEEPER'S HALL AT NIGHT. The same walnut-and-brass hand as the
   People room (renderer/admin/admin.css) and the painted face cast, lit from one
   ember low in the room. Faces are mounted in brass rings; a locked profile wears
   the painted padlock; the code pad is a row of brass sockets that take an ember
   as each digit goes in — never dots.

   Rules carried over from the People room: one shape for every profile (the Add
   tile is a peer, not a special box); a state is a painted mark AND a word; no
   colour-only signals. Everything moves in, and nothing moves for reduced motion.
   ───────────────────────────────────────────────────────────────────────────── */

.who {
  --who-wood:      #120d13;
  --who-wood-2:    #1b141c;
  --who-plate:     #221b24;
  --who-plate-2:   #2a2029;
  --who-brass:     #c9a24a;
  --who-brass-dim: #8a6f33;
  --who-ember:     #ff9a3c;
  --who-ember-hi:  #ffc77a;
  --who-ink:       #f4ede2;
  --who-ink-dim:   #c3b8a8;
  --who-ink-mute:  #8e8376;
  --who-line:      rgba(255, 206, 160, .12);
  --who-line-hi:   rgba(255, 190, 130, .32);
  --who-bad:       #f06a52;
  --who-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --who-face: clamp(92px, 12vw, 148px);
  --who-ease: cubic-bezier(.2, .8, .2, 1);

  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  color: var(--who-ink);
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(255, 140, 50, .20), transparent 60%),
    radial-gradient(70% 50% at 50% -10%, rgba(201, 162, 74, .10), transparent 70%),
    linear-gradient(180deg, var(--who-wood-2), var(--who-wood));
  font-size: 16px;
  line-height: 1.4;
  color-scheme: dark;
  box-sizing: border-box;
  animation: who-in .32s var(--who-ease) both;
}
.who *, .who *::before, .who *::after { box-sizing: border-box; }
/* The screen swaps its parts with [hidden]; the flex/grid displays below must
   not resurrect a hidden wall, foot or box. */
.who [hidden] { display: none !important; }
.who.is-leaving { animation: who-out .28s ease-in both; }
@keyframes who-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes who-out { to { opacity: 0; } }

/* The close button: a simple × is the one drawn glyph on this screen. */
.who-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--who-line);
  background: transparent;
  color: var(--who-ink-dim);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.who-stage {
  width: min(1100px, 100%);
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 4vh, 40px);
  padding-top: 24px;
}

.who-head { text-align: center; }
.who-title {
  margin: 0;
  font-family: var(--who-serif);
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 52px);
  letter-spacing: -.01em;
  color: var(--who-ink);
  animation: who-drop .5s var(--who-ease) both;
}
.who-sub {
  margin: 8px 0 0;
  color: var(--who-ink-mute);
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: who-drop .5s .06s var(--who-ease) both;
}
@keyframes who-drop { from { opacity: 0; transform: translateY(-10px); } }

/* ── the wall of faces ─────────────────────────────────────────────────────── */
/* A centred wrap: every tile one size, a short last row centred under the
   others rather than stranded at the left edge. */
.who-wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 3vw, 34px) clamp(16px, 3.4vw, 40px);
}
.who-wall > li { display: contents; }

.who-tile {
  --i: 0;
  width: calc(var(--who-face) + 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  animation: who-rise .56s calc(.08s + var(--i) * 70ms) var(--who-ease) both;
  transition: opacity .3s ease, transform .4s var(--who-ease), filter .3s ease;
}
@keyframes who-rise { from { opacity: 0; transform: translateY(18px) scale(.92); } }

.who-ring {
  position: relative;
  width: var(--who-face);
  height: var(--who-face);
  border-radius: 50%;
  padding: 5px;
  background: conic-gradient(from 210deg, var(--who-brass-dim), var(--who-brass), #f0d48a, var(--who-brass), var(--who-brass-dim));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .4);
  transition: transform .35s var(--who-ease), box-shadow .35s ease;
}
.who-ring > img.who-face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--who-plate);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .5);
}
/* The Add tile: the same ring, a walnut face plate and the painted cameo. */
.who-ring.is-add > .who-face-plate {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, var(--who-plate-2), var(--who-wood));
}
.who-ring.is-add img { width: 52%; height: 52%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }

/* The painted padlock, hung on the ring of a profile that asks for a code. */
.who-lock {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: clamp(30px, 3.4vw, 40px);
  height: clamp(30px, 3.4vw, 40px);
  border-radius: 50%;
  padding: 4px;
  background: var(--who-wood);
  box-shadow: 0 0 0 2px var(--who-brass-dim), 0 4px 10px rgba(0, 0, 0, .5);
}
.who-lock img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Manage mode: the quill hangs where the padlock would. */
.who-edit-mark {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 6, 10, .55);
  opacity: 0;
  transition: opacity .25s ease;
}
.who-edit-mark img { width: 40%; height: 40%; object-fit: contain; }
.who.is-managing .who-tile.can-edit .who-edit-mark { opacity: 1; }
.who.is-managing .who-tile:not(.can-edit) { opacity: .35; cursor: default; }
.who.is-managing .who-tile.is-add { opacity: .35; cursor: default; }

.who-name {
  max-width: 100%;
  font-family: var(--who-serif);
  font-size: clamp(17px, 1.7vw, 21px);
  color: var(--who-ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .25s ease;
}
.who-note {
  margin-top: -6px;
  min-height: 1.3em;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--who-ink-mute);
}
.who-tile.is-current .who-note { color: var(--who-ember-hi); }
.who-tile.is-current .who-ring {
  box-shadow: 0 0 0 3px rgba(255, 154, 60, .55), 0 0 34px rgba(255, 140, 50, .35), 0 10px 30px rgba(0, 0, 0, .55);
}

@media (hover: hover) {
  .who:not(.is-managing) .who-tile:hover .who-ring,
  .who.is-managing .who-tile.can-edit:hover .who-ring {
    transform: translateY(-4px);
    box-shadow: 0 0 0 3px rgba(255, 199, 122, .7), 0 0 40px rgba(255, 140, 50, .35), 0 16px 34px rgba(0, 0, 0, .6);
  }
  .who-tile:hover .who-name { color: var(--who-ink); }
  .who-close:hover, .who-link:hover { color: var(--who-ink); border-color: var(--who-line-hi); }
  .who-btn:hover { border-color: var(--who-brass); color: var(--who-ink); }
  .who-btn.is-primary:hover { background: var(--who-ember-hi); }
  .who-key:hover { border-color: var(--who-brass); }
}
.who-tile:focus-visible { outline: none; }
.who-tile:focus-visible .who-ring { box-shadow: 0 0 0 3px var(--who-ember-hi), 0 0 0 7px rgba(255, 199, 122, .25); }
.who :is(button, input, a):not(.who-tile):focus-visible { outline: 2px solid var(--who-ember-hi); outline-offset: 3px; }

/* Choosing: the chosen face steps forward, the rest of the hall dims back. */
.who.is-choosing .who-tile:not(.is-chosen) { opacity: 0; transform: scale(.9); pointer-events: none; }
.who.is-choosing .who-tile.is-chosen .who-ring { transform: scale(1.06); }
.who.is-opening .who-tile.is-chosen .who-ring {
  transform: scale(1.14);
  box-shadow: 0 0 0 4px var(--who-ember-hi), 0 0 80px rgba(255, 140, 50, .6);
  transition-duration: .6s;
}
.who.is-opening .who-head, .who.is-opening .who-foot { opacity: 0; transition: opacity .3s ease; }

/* ── the strongbox: code and password ──────────────────────────────────────── */
.who-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(420px, 100%);
  animation: who-rise .45s var(--who-ease) both;
}
.who-box[hidden] { display: none; }
.who-box-face {
  width: calc(var(--who-face) * .72);
  height: calc(var(--who-face) * .72);
}
.who-box-title {
  margin: 0;
  font-family: var(--who-serif);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  text-align: center;
}
.who-box-hint { margin: -8px 0 0; color: var(--who-ink-mute); font-size: 14px; text-align: center; }

/* The sockets. Four always show (the shortest code); more open as digits go in,
   up to eight. A filled socket holds an ember — a slab of light, not a dot. */
.who-sockets { display: flex; gap: 10px; justify-content: center; min-height: 58px; }
.who-socket {
  width: 40px;
  height: 54px;
  border-radius: 10px;
  background: linear-gradient(180deg, #0b080c, #1a131b);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .8), 0 0 0 1px var(--who-brass-dim);
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.who-socket::after {
  content: '';
  position: absolute;
  inset: 8px 7px;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 60%, #fff3d6, var(--who-ember-hi) 30%, var(--who-ember) 62%, #c4471b);
  box-shadow: 0 0 14px rgba(255, 154, 60, .8);
  transform: scaleY(0);
  transform-origin: bottom;
  opacity: 0;
  transition: transform .18s var(--who-ease), opacity .18s ease;
}
.who-socket.is-filled::after { transform: none; opacity: 1; }
.who-socket.is-new { animation: who-socket-in .2s var(--who-ease) both; }
@keyframes who-socket-in { from { width: 0; opacity: 0; } }
.who-sockets.is-wrong { animation: who-shake .42s ease both; }
.who-sockets.is-wrong .who-socket { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .8), 0 0 0 1px var(--who-bad); }
@keyframes who-shake {
  20% { transform: translateX(-9px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}

.who-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: min(300px, 100%);
}
.who-key {
  height: 58px;
  border-radius: 14px;
  border: 1px solid var(--who-line-hi);
  background: linear-gradient(180deg, var(--who-plate-2), var(--who-plate));
  color: var(--who-ink);
  font-family: var(--who-serif);
  font-size: 24px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45);
  transition: transform .08s ease, box-shadow .08s ease, border-color .2s ease;
}
.who-key:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.who-key.is-word { font-family: inherit; font-size: 15px; font-weight: 600; }
.who-key.is-del { font-family: inherit; font-size: 24px; }
.who-key.is-open { background: var(--who-ember); border-color: transparent; color: #241306; }
.who-key:disabled { opacity: .45; cursor: default; }

.who-field {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--who-line-hi);
  background: rgba(0, 0, 0, .3);
  color: var(--who-ink);
  font: inherit;
  font-size: 16px;
  padding: 11px 14px;
}
.who-msg { min-height: 1.4em; margin: 0; font-size: 14px; color: var(--who-bad); text-align: center; }
.who-msg.is-ok { color: var(--who-ember-hi); }

.who-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.who-link {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--who-ink-dim);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--who-brass-dim);
  cursor: pointer;
}

/* ── the foot of the hall ──────────────────────────────────────────────────── */
.who-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
  animation: who-drop .5s .3s var(--who-ease) both;
}
.who-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--who-line-hi);
  background: rgba(0, 0, 0, .25);
  color: var(--who-ink-dim);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
}
.who-btn img { width: 24px; height: 24px; object-fit: contain; }
.who-btn.is-primary { background: var(--who-ember); color: #241306; border-color: transparent; font-weight: 650; }
.who-btn.is-danger { color: var(--who-bad); border-color: rgba(240, 106, 82, .4); }
.who-btn[aria-pressed=true] { border-color: var(--who-brass); color: var(--who-ink); background: rgba(201, 162, 74, .14); }
.who-btn:disabled { opacity: .5; cursor: wait; }

/* The "ask on open" switch is a real checkbox, dressed as a brass lever. */
.who-ask { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; color: var(--who-ink-dim); font-size: 14px; cursor: pointer; }
.who-ask input { appearance: none; width: 44px; height: 26px; border-radius: 13px; margin: 0; background: #0c080d; box-shadow: inset 0 0 0 1px var(--who-brass-dim); position: relative; cursor: pointer; transition: background .2s ease; }
.who-ask input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--who-ink-mute); transition: transform .22s var(--who-ease), background .2s ease; }
.who-ask input:checked { background: rgba(255, 154, 60, .25); }
.who-ask input:checked::after { transform: translateX(18px); background: var(--who-ember-hi); }

/* ── the profile sheet (add / edit) ────────────────────────────────────────── */
.who-sheet {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--who-plate-2), var(--who-plate));
  box-shadow: 0 0 0 1px var(--who-line-hi), 0 30px 80px rgba(0, 0, 0, .6);
  animation: who-rise .42s var(--who-ease) both;
}
.who-sheet[hidden] { display: none; }
.who-sheet-head { display: flex; align-items: center; gap: 18px; }
.who-sheet-head .who-ring { width: 88px; height: 88px; flex-shrink: 0; padding: 4px; }
.who-sheet-head label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--who-ink-mute); letter-spacing: .08em; text-transform: uppercase; }
.who-sheet-title { margin: 0 0 2px; font-family: var(--who-serif); font-size: 24px; font-weight: 600; color: var(--who-ink); letter-spacing: 0; text-transform: none; }
.who-row { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--who-line); }
.who-row-k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--who-ink-mute); }
.who-row-v { color: var(--who-ink-dim); font-size: 15px; }
.who-row-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Faces to wear: one grid, every cell identical. 8 → 8 across, 4×2 on a phone;
   9 (.is-9: the keeper's own face, offered to the keeper) → 9 across, 3×3. */
.who-cast { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.who-cast.is-9 { grid-template-columns: repeat(9, 1fr); }
.who-cast button { aspect-ratio: 1; padding: 3px; border-radius: 50%; border: 2px solid transparent; background: rgba(0, 0, 0, .3); cursor: pointer; touch-action: manipulation; min-width: 44px; }
.who-cast button img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.who-cast button[aria-pressed=true] { border-color: var(--who-ember-hi); box-shadow: 0 0 16px rgba(255, 154, 60, .45); }

/* Two choices, one control: the libraries a profile may open. */
.who-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.who-seg button { min-height: 58px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--who-line-hi); background: rgba(0, 0, 0, .25); color: var(--who-ink-dim); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.who-seg button strong { display: block; font-size: 15px; color: var(--who-ink); }
.who-seg button[aria-pressed=true] { border-color: var(--who-brass); background: rgba(201, 162, 74, .14); }
.who-codeset { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.who-codeset[hidden] { display: none; }
.who-sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--who-line); }
.who-sheet-foot .who-spacer { flex: 1; }

@media (max-width: 560px) {
  .who { --who-face: 104px; }
  .who-wall { gap: 22px 18px; }
  .who-cast { grid-template-columns: repeat(4, 1fr); }
  .who-cast.is-9 { grid-template-columns: repeat(3, 1fr); }
  .who-codeset { grid-template-columns: 1fr; }
  .who-foot { flex-direction: column; }
  .who-sheet-foot .who-spacer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .who, .who *, .who *::before, .who *::after {
    animation: none !important;
    transition: none !important;
  }
}