/* me-page-and-theme: Me (/ticket/me.php), its pages and the language page, on top of nvv-visit.css (the visit pages' tokens:
   Mist and Night, the greens, Outfit for names and numbers) and nvv-member.css (avatar, switch, sheet). An Apple-style grouped
   list: group headers, rounded groups with inset hairlines, 52 px rows with a tinted icon, the value and a chevron. Light and
   dark follow the phone or the Me choice (html[data-theme]); right to left mirrors by logical properties. Colours are tokens. */
:root{--palette-me-ffffff:#ffffff;--palette-me-2b3652:#2b3652;--me-seg-on:var(--palette-me-ffffff);--me-tint:rgba(22,163,74,.07)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--me-seg-on:var(--palette-me-2b3652);--me-tint:rgba(34,197,94,.14)}}
:root[data-theme="dark"]{--me-seg-on:var(--palette-me-2b3652);--me-tint:rgba(34,197,94,.14)}
.me{flex:1;display:flex;flex-direction:column;padding:2px 16px 0}
.me-h{margin:6px 4px 10px;font:500 30px/1.12 var(--f-brand);letter-spacing:-.4px}
.me-lead{margin:0 4px 12px;color:var(--soft);font-size:15.5px;line-height:1.42}
.me-hint{margin:10px 6px 0;color:var(--soft);font-size:13.5px;line-height:1.4}
.me-empty{margin:4px 6px 12px;color:var(--soft);font-size:15px;line-height:1.42}
.me-foot{margin:10px 6px 0;font-size:15px}.me-foot a{color:var(--g3);font-weight:600;text-decoration:none}
.me-note{display:flex;align-items:center;gap:8px;margin:0 4px 12px;font-size:15px;font-weight:600;color:var(--g3)}
.me-note svg{width:18px;height:18px;flex:none}.me-note.bad{color:var(--bad)}
/* the top card: who, the level, the points */
.me-top{display:flex;flex-direction:column;gap:12px;padding:16px}
.me-who{display:flex;align-items:center;gap:14px}
.me-av{width:58px;height:58px;font-size:24px}
.me-who .tx{flex:1;min-width:0}
.me-who b{display:block;font:500 23px/1.15 var(--f-brand);letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-who small{display:block;margin-top:3px;color:var(--soft);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.me-edit{flex:none;min-height:36px;padding:0 14px;border-radius:18px;background:var(--me-tint);color:var(--g3);font-weight:650;font-size:14.5px;display:inline-flex;align-items:center;text-decoration:none}
.me-edit:active{transform:scale(.97)}
.me-level{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.me-level .badge{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px 0 10px;border-radius:15px;background:var(--me-tint);color:var(--g3);font-weight:700;font-size:14px}
.me-level .badge svg{width:17px;height:17px;flex:none}
.me-level small{color:var(--soft);font-size:14px}
.me-prog{display:grid;gap:7px}
.me-prog small{color:var(--soft);font-size:14px;line-height:1.35}
.me-prog .bar{display:block;height:6px;border-radius:3px;background:var(--hair);overflow:hidden}
.me-prog .bar i{display:block;height:100%;border-radius:3px;background:var(--g2)}
.me-pts{display:flex;align-items:center;gap:14px;margin:2px -16px -16px;padding:12px 16px 14px;border-top:.5px solid var(--hair);text-decoration:none;color:inherit;border-radius:0 0 26px 26px}
.me-pts:active{background:var(--card2)}
.me-pts .n{font:500 30px/1 var(--f-brand);letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--ink0)}
.me-pts .tx{flex:1;min-width:0}.me-pts b{display:block;font-size:16px;font-weight:600}.me-pts small{display:block;color:var(--soft);font-size:13.5px}
.me-pts .chev,.me-row .chev{flex:none;color:var(--soft);display:flex}.me-pts .chev svg,.me-row .chev svg{width:18px;height:18px}
[dir=rtl] .me-pts .chev svg,[dir=rtl] .me-row .chev svg{transform:scaleX(-1)}
/* groups */
.me-gh{margin:22px 16px 7px;font-size:14px;font-weight:600;color:var(--soft);letter-spacing:0}
.me-top+.me-gh{margin-top:24px}
.me-list{list-style:none;margin:0;padding:0;border-radius:18px;background:var(--card);box-shadow:0 0 0 .5px var(--hair);overflow:hidden}
.me-list>li,.me-list>.me-row,.me-list>form{position:relative}
.me-list>li,.me-list>form:not(.me-row){display:block}
.me-list>li+li::before,.me-list>.me-row+.me-row::before,.me-list>form+form::before,.me-list>input+.me-row~.me-row::before,.me-list>button+button::before{content:"";position:absolute;top:0;inset-inline:16px 0;height:.5px;background:var(--hair)}
.me-list>li:has(.ic)+li::before{inset-inline-start:60px}
.me-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 14px;border:0;background:none;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.me-row:active:not(.is-static){background:var(--card2)}
.me-row.is-static{cursor:default}
.me-row .ic{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--me-tint);color:var(--g3)}
.me-row .ic svg{width:19px;height:19px}
.me-row .tx{flex:1;min-width:0}
.me-row .tx b{display:block;font-size:16.5px;font-weight:500;line-height:1.25}
.me-row .tx small{display:block;margin-top:2px;color:var(--soft);font-size:13.5px;line-height:1.3}
.me-row .val{flex:none;color:var(--soft);font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}
.me-row .mv-av{width:34px;height:34px;font-size:15px}
.me-row .tick{flex:none;width:22px;height:22px;color:var(--g3)}.me-row .tick svg{width:22px;height:22px}
/* a card with lines and switches (tag, notifications, account) */
.me-sec{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;margin-bottom:12px}
.me-line{display:flex;align-items:center;gap:12px}
.me-line .tx{flex:1;min-width:0}.me-line b{display:block;font-size:16.5px;font-weight:600;line-height:1.3}.me-line small{display:block;margin-top:3px;color:var(--soft);font-size:14px;line-height:1.4}
.me-line .ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--me-tint);color:var(--g3)}.me-line .ic svg{width:22px;height:22px}
.me-sec .nvv-fl{margin:2px 2px 0}
.me-save{margin-top:4px}
.me-p{margin:0;font-size:15.5px;line-height:1.45}
.me-ro{display:flex;justify-content:space-between;gap:12px;padding:6px 2px;font-size:15px;color:var(--soft)}.me-ro b{color:var(--ink0);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.me-form{margin-bottom:12px}
/* Appearance: one segmented control */
.me-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;border-radius:13px;background:var(--card2);box-shadow:inset 0 0 0 .5px var(--hair)}
.me-seg button{min-height:42px;padding:0 6px;border:0;border-radius:10px;background:none;color:var(--soft);font:600 15.5px/1.15 var(--f-body);white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.me-seg button[aria-checked=true]{background:var(--me-seg-on);color:var(--ink0);box-shadow:0 1px 3px rgba(11,18,32,.14),0 0 0 .5px var(--hair)}
.me-seg button:active{transform:scale(.97)}
/* contacts: a row opens its edit form */
.me-ct details>summary{list-style:none}.me-ct details>summary::-webkit-details-marker{display:none}
.me-ct details[open] .chev svg{transform:rotate(90deg)}
.me-ctf{display:grid;gap:4px;padding:2px 14px 14px}
.me-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.me-danger{min-height:50px;border:0;border-radius:14px;background:none;box-shadow:inset 0 0 0 1px var(--hair);color:var(--bad);font-weight:650;font-size:16px;cursor:pointer}
/* help */
.me-faq{display:grid;gap:10px}
.me-faq details{padding:0 16px}
.me-faq summary{min-height:52px;display:flex;align-items:center;font-size:16px;font-weight:600;cursor:pointer;list-style:none}
.me-faq summary::-webkit-details-marker{display:none}
.me-faq p{margin:0 0 14px;color:var(--soft);font-size:15px;line-height:1.45}
/* points */
.me-big{display:grid;justify-items:center;gap:2px;padding:22px 16px}
.me-big .n{font:300 56px/1 var(--f-brand);letter-spacing:-1px;font-variant-numeric:tabular-nums}
.me-big b{font-size:16px;font-weight:600}.me-big small{color:var(--soft);font-size:14px}
/* sign out: the row, the action sheet and its page version */
.me-out{margin:26px 0 0}
.me-signout{display:block;width:100%;min-height:52px;border:0;border-radius:18px;background:var(--card);box-shadow:0 0 0 .5px var(--hair);color:var(--bad);font:600 16.5px/1 var(--f-body);cursor:pointer}
.me-signout:active{background:var(--card2)}
.me-as .mv-panel{text-align:center;padding-top:8px}
.me-as .mv-panel h2{margin:4px 0 4px;font-size:21px}
.me-as-row{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin-top:10px;border:0;border-radius:14px;background:var(--card2);color:var(--ink0);font:600 17px/1 var(--f-body);text-decoration:none;cursor:pointer}
.me-as-row.is-red{color:var(--bad)}
.me-as-row:active{transform:scale(.985)}
.me-ask .me-as-row{background:var(--card);box-shadow:0 0 0 .5px var(--hair)}
@media (prefers-reduced-motion:reduce){.me-seg button,.me-row,.me-edit{transition:none}}
.me .nvv-btn svg{width:20px;height:20px;flex:none}
.me .mv-none{margin-bottom:12px}

/* Account (the older member-account.php rebuilt): the photo card, the fields, E-mail and mobile, Password, the inbox, rewards */
.me-acc{display:contents}
.me-photo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 16px 16px;margin-bottom:12px;text-align:center}
.me-pic{position:relative;display:block;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
.me-pic:active .me-av-xl{transform:scale(.96)}
.me-av-xl{width:96px;height:96px;font-size:38px;transition:transform .14s cubic-bezier(.2,.8,.2,1)}
.me-pic .cam{position:absolute;inset-inline-end:-2px;bottom:-2px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--g1);color:#fff;box-shadow:0 0 0 3px var(--card)}
.me-pic .cam svg{width:18px;height:18px}
.me-pic input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.me-pic[aria-busy=true] .me-av-xl{opacity:.55}
.me-photo-n{margin-top:6px;font:500 22px/1.2 var(--f-brand);letter-spacing:-.2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-photo-a{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.me-link{min-height:36px;display:inline-flex;align-items:center;padding:0 4px;border:0;background:none;color:var(--g3);font:600 15.5px/1 var(--f-body);cursor:pointer;text-decoration:none}
.me-link.is-red{color:var(--bad)}
.me-photo-h{color:var(--soft);font-size:13px;line-height:1.35}
.me-fm{gap:4px}
.me-fh{display:block;margin:6px 4px 4px;color:var(--soft);font-size:13px;line-height:1.35}
.me-mk{margin-top:10px}
.me-plain{min-height:50px;border:0;border-radius:14px;background:none;box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink0);font-weight:600;font-size:16px;cursor:pointer}
.me-plain:active,.me-danger:active{transform:scale(.98)}
.me-cur{word-break:break-all;text-align:start}
.me-sec .me-fm{display:flex;flex-direction:column}
.me-rules{list-style:none;margin:8px 2px 4px;padding:0;display:grid;gap:6px}
.me-rules li{display:flex;align-items:center;gap:8px;color:var(--soft);font-size:14px}
.me-rules li svg{width:16px;height:16px;flex:none;opacity:.35;transition:opacity .15s,color .15s}
.me-rules li.ok{color:var(--ink0)}.me-rules li.ok svg{opacity:1;color:var(--g3)}
.me-act{display:flex;justify-content:flex-end;margin:-4px 2px 10px}
.me-inbox .me-msg{position:relative}
.me-msg .me-row{align-items:flex-start;padding-top:12px}
.me-msg .dot{flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:transparent}
.me-msg.is-new .dot{background:var(--g2)}
.me-msg.is-new .tx b{font-weight:650}
.me-msg .when{font-variant-numeric:tabular-nums}
.me-msg-a{display:flex;align-items:center;gap:10px;padding:0 14px 12px 35px}
.me-msg-a .me-plain{min-height:36px;padding:0 14px;font-size:14px;border-radius:18px}
.me-issued{display:grid;justify-items:center;gap:8px;padding:20px 16px;margin-bottom:12px;text-align:center}
.me-issued b{font-size:17px;font-weight:650}
.me-issued .qr{width:180px;height:180px;border-radius:12px;background:#fff;padding:8px;image-rendering:pixelated}
.me-issued .code{font:600 24px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:2px}
.me-issued small{color:var(--soft);font-size:13.5px;line-height:1.4;max-width:30ch}
.me-row .nvv-pill:disabled{opacity:1;background:var(--card2);color:var(--soft);cursor:default}
@media (prefers-reduced-motion:reduce){.me-av-xl,.me-rules li svg{transition:none}}
/* the member's photo fills its circle whatever the picture's size (the image never sizes the circle) */
.me-av,.me-av-xl{position:relative;overflow:hidden}
.me-av img,.me-av-xl img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}