/* Elf Tracker: the Me page (js/tracker-new/me-page.js, step 'me', Paul 1 Nov 2026) and the small
   "Me and settings" button at the end of the tracker home (.tn-melink, tracker-cards.js meLinkHtml).
   Mobile first: one column from 320px, no sideways scroll; from 760px the family and notification boxes sit
   side by side in rows of equal height (no empty gaps). The boxes and the edit rows reuse .tn-me-box and
   .tn-me-row from css/tracker-review.css. */

/* the tracker home's way in */
.tn-melink{display:flex;align-items:center;gap:14px;width:100%;max-width:1440px;margin:28px auto 0;padding:14px 16px;box-sizing:border-box;
  border-radius:20px;background:rgba(8,20,58,.78);border:1px solid rgba(255,255,255,.18);color:#fff;text-align:left;cursor:pointer;font:inherit;min-height:64px}
.tn-melink:hover{background:rgba(22,48,122,.85)}
.tn-melink:focus-visible{outline:3px solid #F5C24A;outline-offset:3px}
.tn-melink-ic{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#F5C24A;color:#0B1D4D;display:grid;place-items:center}
.tn-melink-ic svg{width:24px;height:24px}
.tn-melink-txt{flex:1 1 auto;min-width:0}
.tn-melink-txt b{display:block;font:800 18px 'Plus Jakarta Sans',sans-serif}
.tn-melink-txt small{display:block;color:#DCE6FF;font-size:15px;line-height:1.35;margin-top:2px}
.tn-melink-go{flex:0 0 auto;font-size:30px;line-height:1;color:#F5C24A}

/* the page */
.tn-mep{max-width:960px;margin:0 auto;color:#fff;overflow-wrap:anywhere}
.tn-mep *{box-sizing:border-box}
.mep-top{padding:6px 0 4px}
.mep-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 10px;border-radius:999px;border:1.5px solid rgba(255,255,255,.5);
  background:rgba(8,20,58,.6);color:#fff;font:700 16px 'Inter',sans-serif;cursor:pointer}
.mep-back span{font-size:24px;line-height:1;margin-top:-2px}
.mep-back:hover{background:rgba(255,255,255,.12)}
.mep-back:focus-visible,.mep-help:focus-visible,.tn-mep select:focus-visible{outline:3px solid #F5C24A;outline-offset:2px}
.tn-mep h1{margin:14px 0 4px;font:800 32px/1.15 'Plus Jakarta Sans',sans-serif;color:#fff}
.tn-mep h1:focus{outline:none}
.mep-sub{margin:0 0 6px;color:#DCE6FF;font-size:17px;line-height:1.45}

.mep-sec{margin:38px 0 0;padding:16px;border-radius:22px;background:rgba(8,20,58,.78);border:1px solid rgba(255,255,255,.14)}
.mep-sec>h2{margin:0 0 12px;font:800 21px 'Plus Jakarta Sans',sans-serif;color:#fff}
.mep-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.mep-grid>.tn-me-box{height:100%}
@media (min-width:760px){
  .mep-grid.mep-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* two boxes side by side, the third (home town; news and offers) across the full width under them */
  .mep-grid.mep-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mep-grid.mep-3>.mep-wide{grid-column:1/-1}
}
.tn-mep .tn-me-box{display:flex;flex-direction:column;align-items:flex-start}
.tn-mep .tn-me-box>*{max-width:100%}
.tn-mep .tn-me-box>ul.tn-me-list,.tn-mep .tn-me-box>.card.alerts{align-self:stretch}
.tn-mep .tn-me-box p{line-height:1.45}
.mep-big{font:800 19px/1.3 'Plus Jakarta Sans',sans-serif;color:#fff!important;margin:0 0 6px!important}
.mep-quiet{color:#C9D6F5!important;font-size:15px}
.mep-row{align-self:stretch;padding:10px 0;border-top:1px solid rgba(255,255,255,.12)}
.mep-row:first-of-type{border-top:0;padding-top:2px}
.mep-row>b{display:block;font:800 17px 'Plus Jakarta Sans',sans-serif;color:#F5C24A;margin:0 0 4px}
.mep-row .btn,.mep-town .btn,.mep-news .btn{margin:6px 0 0;width:auto;min-height:44px}
.mep-row .small:empty{display:none}
.mep-email{font-weight:700;color:#fff!important;font-size:17px}
.mep-out{display:flex;flex-wrap:wrap;gap:8px}
.mep-out .btn{margin:0!important}
.tn-mep .tn-me-del{border-color:#FFB3BF;color:#FFD9DF}

/* the alerts card inside its box (alerts.js) */
.tn-mep .tn-me-alerts .card.alerts .btn{width:auto;margin:6px 0 0}

/* language */
.mep-langbox label{display:block;font-weight:700;margin:0 0 8px;color:#fff}
.tn-mep select{width:100%;max-width:360px;min-height:48px;font-size:18px;padding:8px 12px;border-radius:12px;border:2px solid #fff;background:#fff;color:#0B1D4D}

/* calls: the Camera room's list (calls.js) sits in the box as it is */
.mep-calls .cl-panel{align-self:stretch;margin:0}

/* invite friends: Paul's words (tn.spread), the link, Share */
.mep-count{font-weight:700;color:#fff!important}
.mep-link{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin:4px 0 10px!important}
.mep-link code{background:rgba(255,255,255,.1);border-radius:8px;padding:4px 8px;font-size:14px;color:#fff;word-break:break-all;max-width:100%}
.mep-invite>.btn.red{width:auto;min-width:220px;margin:4px 0 8px}
.mep-opts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.mep-opts .btn{margin:0;width:auto}
.mep-invite .fc-groups,.mep-invite .fc-signoff{color:#DCE6FF;margin:6px 0 0}
.mep-invite .fc-signoff{font-weight:700;color:#fff}

/* password */
.mep-pw{align-self:stretch;max-width:520px}
.mep-show{display:flex!important;align-items:center;gap:8px;font-weight:600!important;margin:10px 0 0!important;min-height:44px;cursor:pointer}
.mep-show input{width:22px!important;height:22px;min-height:0!important;margin:0}

/* help: a settings list */
.tn-mep .mep-list{list-style:none;margin:0;padding:0;align-self:stretch}
.mep-list li{border-top:1px solid rgba(255,255,255,.12)}
.mep-list li:first-child{border-top:0}
.mep-help{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;padding:6px 2px;background:none;border:0;
  color:#fff;font:700 17px 'Inter',sans-serif;text-decoration:none;text-align:left;cursor:pointer}
.mep-help span{font-size:26px;color:#F5C24A;line-height:1}
.mep-help:hover{text-decoration:underline}
.mep-demo{margin-top:16px}

@media (max-width:380px){
  .mep-sec{padding:14px 12px}
  .tn-mep h1{font-size:28px}
  .mep-invite>.btn.red{min-width:0;width:100%}
}
/* the tracker's own .tn width rules are wider: keep the settings page a readable column on big screens */
.tk .tn.tn-mep{max-width:1040px;margin-left:auto;margin-right:auto}
.tn-mep .mep-langbox select{max-width:360px}

/* Paul's tidy-ups (1 Nov 2026) */
/* 1. every elf and child row the same: name left, Change name and Remove right (stacking on the right on
   narrow phones, the same for every row) */
.tn-mep .tn-me-line{display:grid;grid-template-columns:minmax(5.5em,1fr) auto;align-items:center;gap:8px}
.tn-mep .tn-me-acts{justify-content:flex-end}
@media (max-width:440px){.tn-mep .tn-me-btn{padding:0 10px;font-size:14px}.tn-mep .tn-me-acts{gap:5px}}
/* 3. Delete my account: set apart, in red */
.mep-delrow{margin-top:8px;padding-top:14px!important}
body.tnew main .tn-mep .btn.white.mep-del{border:2px solid #FF6B7F!important;color:#FFB3BF!important;background:rgba(217,40,62,.14)!important}
body.tnew main .tn-mep .btn.white.mep-del:hover{background:rgba(217,40,62,.28)!important}
/* 4. Share the magic with a small Copy link beside it, no raw link */
.mep-sharerow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 8px}
.mep-sharerow .btn{margin:0!important}
.mep-sharerow .btn.red{width:auto;min-width:0;padding-left:22px;padding-right:22px}
.mep-sharerow .mep-copy{width:auto;min-height:44px}
@media (max-width:380px){.mep-sharerow .btn.red{min-width:0;flex:1 1 auto}}