/* ═══════════════════════════════════════════════════════════════════════════
   THE NAMES SCREEN — Card Book §19, fourth round. Loaded after cards.css.

   Everything here is scoped under .nm-scr, which names.js wraps the screen in,
   so nothing leaks onto the sign-in frame that shares the same overlay.

   THE INK IS NOT REDRAWN HERE. Four keyframes already existed in cards.css and
   all four are used by name and not by copy:

      upRedact   the upload demo's bar sweeping across a line of a page
      clNmOut    the case line's name fading out under the bar
      clNmGone   the same name letting go of its width so the box is the tag's
      clTagIn    the tag arriving

   The one thing that is new is the end state. The case line's bar retreats and
   leaves the tag standing alone; here the bar stays and the tag sits ON it,
   white on black, because that is what a redacted page looks like and this
   screen's whole job is to show one.

   THE TYPE IS THE BOOK'S AND IT ONLY GOES UP. Input 18px, label 12px
   uppercase, strip 15px, caption 12px, and nothing smaller than 12 anywhere —
   the third round's 13-px paragraphs are the reason this round exists.
   ═══════════════════════════════════════════════════════════════════════════ */

.nm-scr [hidden]{display:none!important}

/* ── the one line, and the glyph that holds the rest ─────────────────────── */
.nm-scr .pg-s{margin-bottom:8px}
.nm-q{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border:1px solid var(--line-strong);border-radius:50%;font-size:10px;line-height:1;
  color:var(--muted);vertical-align:middle;margin-inline-start:5px;padding:0;
  background:none;font-family:inherit;cursor:pointer}
.nm-q:hover,.nm-q:focus-visible{color:var(--text);border-color:var(--primary-hi);outline:none}
/* THE ONLY HIDDEN WORDS ON THE SCREEN, and a finger has no hover. `title`
   answers a pointer; this answers a tap — and it floats rather than sitting in
   the flow, because a note that shoves the whole form down the screen is the
   opposite of a note nobody has to read. */
.nm-scr{position:relative}
/* centred with auto margins and NOT with translateX(-50%): mcIn ends on
   `transform:none`, which would throw a translated bubble back to the left
   edge of wherever it was anchored the moment it finished arriving. */
.nm-pop{position:absolute;inset-inline:0;margin:0 auto;z-index:3;
  width:min(460px,94%);padding:10px 14px;border:1px solid var(--line-strong);
  border-radius:var(--r-s);background:var(--bg);box-shadow:0 18px 44px -18px rgba(0,0,0,.55);
  font-size:12px;line-height:1.55;color:var(--muted);animation:mcIn .18s var(--out) both}

/* ── a person: the label, the one big input ──────────────────────────────── */
.nm-scr .hl{font-size:12px;letter-spacing:.09em;margin:18px 0 6px}
.nm-scr .m-in{margin:0}
/* what to put in the box, under its label */
.nm-hint{font-size:12.5px;line-height:1.5;color:var(--muted);margin:-2px 0 8px}
.nm-scr .m-in input{font-size:18px;padding:12px 14px;border-radius:var(--r-s)}
.nm-scr .m-in input::placeholder{color:var(--muted)}

/* ── the strip of paper ──────────────────────────────────────────────────
   A sentence a judgment might carry, with the name in it twice. Nothing on
   this screen explains the redaction; this is the redaction. */
.nm-strip{margin:10px 0 4px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel,transparent);font-size:15px;line-height:1.7;color:var(--text)}
.nm-cap{font-size:12px;color:var(--muted);margin:0 0 14px}

/* ── the name, the bar, the tag ──────────────────────────────────────────
   One grid cell holds the name and the tag, so neither moves sideways as they
   swap and the punctuation after them stays put — the same reason .cl-redact
   is built this way. The bar is absolute over the cell; the tag is lifted a
   layer above it, because an absolutely-positioned sibling paints over static
   content and the tag has to be ON the bar, not under it. */
.nm-red{position:relative;display:inline-grid;grid-template-areas:"r";align-items:baseline;
  white-space:nowrap;vertical-align:baseline;font-style:normal}
.nm-red .nm,.nm-red .tag{grid-area:r;justify-self:start}
.nm-red .nm{display:inline-block;overflow:hidden;max-width:40em}
.nm-red.pale .nm{color:var(--muted)}
/* -2px, the same as .cl-redact's, and not a pixel more: the sentence has one
   space on each side of the name and a wider bar eats both, so the strip reads
   "On page 3:[CLIENT]appealed" — a redaction that has swallowed the grammar. */
.nm-red .bar{position:absolute;inset-inline-start:-2px;inset-inline-end:-2px;top:-1px;bottom:-2px;
  background:var(--text);border-radius:3px;transform:scaleX(0);transform-origin:0 50%}
/* AND THE TAG TAKES NO ROOM UNTIL IT IS DUE. Sharing the grid cell is what
   keeps the sentence from jumping sideways when the two swap — but a cell as
   wide as the wider of them is a hole in the sentence for as long as somebody
   is still typing, and "On page 3: Daniel    appealed" reads as a mistake.
   So the tag is clamped to nothing and widens on the same beat it fades in,
   while the name lets go of its width underneath: the box goes from the name's
   width to the tag's without either of them moving. */
.nm-red .tag{position:relative;z-index:1;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.04em;color:var(--bg);opacity:0;white-space:nowrap;font-style:normal;
  max-width:0;overflow:hidden;transition:max-width .22s var(--ease) .32s}
.nm-red.on .tag{max-width:20em}
.nm-red.on .bar{animation:upRedact .28s var(--ease) forwards}
/* the bar's own sweep, kept here: the upload stage that used to define it is gone */
@keyframes upRedact{to{transform:scaleX(1)}}
.nm-red.on .nm{animation:clNmOut .18s var(--ease) .16s forwards,
                        clNmGone .20s var(--ease) .30s forwards}
.nm-red.on .tag{animation:clTagIn .24s var(--ease) .34s forwards}

/* ── the forms, as chips ─────────────────────────────────────────────────
   Derived by code from the full name; each on until it is tapped off. They
   rise in turn, which is the only signal that they were proposed rather than
   typed. */
.nm-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 4px;align-items:center}
.nm-chips:empty{margin:0}
.nm-chips.on .m-chip{animation:frRow .3s var(--out) both;animation-delay:calc(var(--i,0)*.05s)}
.nm-scr .m-chip.nm-add{border-style:dashed;font-weight:500}
.nm-chipin{font:inherit;font-size:var(--t-ui);padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--primary);background:var(--surface-2);color:var(--text);width:16ch;min-width:0}
.nm-chipin:focus{outline:none}

/* ── the line under a role left blank ────────────────────────────────────
   It does not stop anything. A name somebody does not know yet is a name the
   first paper waits for, not a form error. */
.nm-blank{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.5}

/* ── one person at a time ────────────────────────────────────────────────
   Height first, then opacity, so it reads as room being made rather than
   something appearing out of nothing. */
.nm-fold{height:0;opacity:0;overflow:hidden;
  transition:height .24s var(--out),opacity .2s var(--ease) .18s}
.nm-fold.open{opacity:1}

/* ── the children, closed until there are any ────────────────────────────── */
.nm-kids{margin-top:20px}
.nm-kids .m-gap{margin-bottom:0}
.nm-kid{margin-top:12px}
/* someone else: who they are, one tap, above their name */
.nm-roles{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.nm-roles .m-chip{cursor:pointer}
.nm-more{font:inherit;font-size:var(--t-meta);font-weight:600;color:var(--primary-hi);
  background:none;border:0;padding:8px 2px 0;cursor:pointer}
.nm-more:hover{text-decoration:underline}

.nm-acts{justify-content:flex-end;margin-top:18px}

/* ── ON START: THE NAME IN THE FIELD BECOMES THE TAG ─────────────────────
   The input keeps its place and its size; its text goes transparent and the
   bar is drawn over the top of it. Nothing is replaced, so a failed POST puts
   the screen back exactly as it was by removing one class. */
.nm-inwrap{position:relative}
.nm-inwrap .nm-swap{display:none;position:absolute;inset:1px;align-items:center;
  padding:12px 14px;font-size:18px;pointer-events:none}
.nm-inwrap.swapped .nm-swap{display:flex}
.nm-inwrap.swapped input{color:transparent;caret-color:transparent}

/* and then the screen dissolves into the case's first line */
.fr-ov.nm-out{opacity:0;transition:opacity .3s var(--ease)}

/* ── NO MOTION, SAME MEANING ─────────────────────────────────────────────
   The attribute is already collapsed to 1ms globally by cards.css; this is the
   other half — somebody whose system is set that way and who never touched a
   setting of ours. The end state is identical either way: the bar drawn, the
   name gone, the tag on it. The screen still tells the truth, it just does not
   perform it. */
.nm-red.still .bar{animation:none;transform:scaleX(1)}
.nm-red.still .nm{animation:none;opacity:0;max-width:0}
.nm-red.still .tag{animation:none;opacity:1;transition:none;max-width:20em}
@media (prefers-reduced-motion:reduce){
  .nm-red.on .bar{animation:none;transform:scaleX(1)}
  .nm-red.on .nm{animation:none;opacity:0;max-width:0}
  .nm-red.on .tag{animation:none;opacity:1;transition:none;max-width:20em}
  .nm-chips.on .m-chip{animation:none}
  .nm-fold{transition:none}
  .nm-pop{animation:none}
  .fr-ov.nm-out{transition:none}
}
:root[data-motion="reduced"] .nm-red.on .bar{transform:scaleX(1)}
:root[data-motion="reduced"] .nm-red.on .nm{opacity:0;max-width:0}
:root[data-motion="reduced"] .nm-red.on .tag{opacity:1;max-width:20em}