/* GROWLMASTER'S NICKNAME, ITS LOOK, ONE FOR EVERY PAGE (gmNick.js's window; gmAccount.js nickHtml's line): v1's and v2's
   alike (Maayan, 2026-11-02). */
/* THE NICKNAME (studio.js nickHtml): the name, whole, on as many lines as it takes, broken only between its words (Maayan,
   2026-10-24: "never use an ellipsis and never cut the name"), and beside it the picture's own pencil (.gm-ep__pen, here
   in the row, its button a 48px tap). ITS WINDOW (openNickPick): the name large, the note under it, the three dropdowns
   side by side, each going to its own line when they don't fit (never made small: 48px, 16px text); Randomize under
   them. While it rolls the words flicker. */
.gm-nick { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.gm-nick__h { color:var(--ink2, #6f5c3c); }
.gm-nick__name { font-family:'Frank Ruhl Libre',serif; font-size:22px; line-height:1.2; white-space:normal; overflow-wrap:break-word; word-break:normal; }
.gm-nick__row { display:flex; align-items:center; gap:8px; }
.gm-nick__row .gm-nick__name { flex:0 1 auto; min-width:0; }
.gm-nick__edit { flex:none; width:48px; height:48px; display:grid; place-items:center; padding:0; border:0; background:none; cursor:pointer; }
.gm-nick__edit .gm-ep__pen { position:static; }
.gm-nick__edit:focus-visible { outline:3px solid var(--ink2, #6f5c3c); outline-offset:1px; border-radius:50%; }
/* it scrolls on a short screen, so it clips: room at each side for a dropdown's focus ring (6px, given back by the margin,
   so the dropdowns are exactly the content's width), and 32px over the footer's line (Maayan, 2026-10-24) */
.gm-nick--pick { gap:12px; margin:0 -6px; padding:4px 6px 32px; overflow-y:auto; }
.gm-nick--pick .gm-nick__name { font-size:28px; }
/* the window's top (Maayan's second wireframe): centred, their picture (125px), the note, the nickname underlined, and
   Randomize Nickname */
.gm-nickpick__top { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; margin-bottom:12px; }
.gm-nickpick__face, .gm-nickpick__face > * { width:125px; height:125px; }
.gm-nickpick__top .gm-nick__note { font-weight:700; font-size:15px; }
.gm-nickpick__top .gm-nick__name { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
.gm-nickpick__top .gm-nick__random { align-self:center; }
.gm-nick__random .gm-btn__i svg { width:22px; height:22px; display:block; }
.gm-nick__note { margin:0; color:var(--ink2, #6f5c3c); font-size:16px; }
.gm-nick__pick { gap:8px; }
.gm-nick__sel { min-width:0; min-height:48px; padding:8px 16px; font:inherit; font-size:16px; font-weight:700; color:var(--ink, #3a2c17);
  background:var(--sheet, #fff8e8); border:2px solid var(--edge, #d8c9a5); border-radius:10px; }
.gm-nick__sel:focus-visible { outline:3px solid var(--ink2, #6f5c3c); outline-offset:1px; }
/* WHILE IT ROLLS, THE BOXES STAY (Maayan, 2026-10-24, through Troll: "no shake, scale, width change or reflow. Only the
   text inside each dropdown may move"): each box's width is its column's (.gm-nick__pick's grid), never its word's, and
   a long word is cut at the box's edge; only the words change. */
.gm-nick__pick { display:grid; grid-template-columns:repeat(auto-fit, minmax(9em, 1fr)); }
.gm-nick__sel { width:100%; overflow:hidden; white-space:nowrap; text-overflow:clip; }
.gm-nick__random { align-self:flex-start; min-height:48px; }
.gm-nickbox .gm-pick__foot { gap:8px; }   /* the nickname window: Cancel and Save changes (openNickPick) */
/* each dropdown's chevron, in the ink, at its end */
.gm-nick__sel { -webkit-appearance:none; appearance:none; padding-inline-start:16px; padding-inline-end:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2c17' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:16px 16px; background-position:right 16px center; }
[dir="rtl"] .gm-nick__sel { background-position:left 16px center; }
/* in GrowlMaster v2's window: its button's icon (GM2UI.button's .g-btn__i) as v1's */
.gm-nick__random .g-btn__i svg { width:22px; height:22px; display:block; }
/* in GrowlMaster v2's kit window (no app.css there): its foot, Cancel and Save changes at the end over a line */
.g-window .gm-nickbox .gm-pick__foot, .g-window .gm-pick__foot { display:flex; justify-content:flex-end; gap:8px; padding-top:12px; border-top:var(--g-stroke, 2px) solid var(--g-separator, #d8c9a5); }
.g-window .gm-nickpick__face .g-avatar { --g-size:125px; }