/* The account sheet (src/account/accountSheet.js) and the account chip in the
   launch panel (src/account/accountUI.js). The sheet borrows the Community
   sheet's look -- the .overlay and .sheet shells and the colours in
   interface.css -- so only what is new lives here. Phone first: under 600px
   the sheet is the whole screen with 16px gutters; every control is at least
   44px tall; nothing scrolls sideways. */

/* ---- the chip, beside Community ---- */
.accountChip{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.accountChip .acChipIcon{font-size:16px;line-height:1}
.accountChip .acChipPic{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:#ffb020;color:#120f0d;font:800 14px/1 var(--disp)}
.accountChip .acChipPic.hasImg{background:transparent}
.accountChip .acChipPic img{width:100%;height:100%;object-fit:contain}
.accountChip .acChipName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- the sheet ---- */
#accountSheet{z-index:40}
#accountSheet [hidden]{display:none!important}
#accountSheet .sheet{position:relative;width:min(520px,100%);max-height:min(92dvh,880px);display:flex;flex-direction:column;overflow:hidden;padding:20px 22px 0}
#accountSheet .acHead{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
#accountSheet .acHead h2{margin:0;font:700 22px/1.1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
#accountSheet .acClose{min-height:44px;min-width:80px;background:transparent}
#accountSheet .acTabs{flex:none;display:flex;gap:6px;margin:6px 0 8px}
#accountSheet .acTab{flex:1;min-height:46px}
#accountSheet .acTab.on{background:#ffb020;color:#14171d;border-color:#ffb020;box-shadow:none}
/* what the last action did: a toast over the bottom of the sheet, so it never moves the page and never blocks a tap */
#accountSheet .acMsg{position:absolute;z-index:3;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));pointer-events:none;
  font-size:14px;line-height:1.4}
#accountSheet .acMsg:not(:empty){padding:12px 14px;background:#1d2833;border:1px solid #ffffff2a;border-left:4px solid #ffb020;box-shadow:0 8px 24px #000a}
#accountSheet .acMsg.err{border-left-color:#ff6a5c;color:#ffd2cc}
#accountSheet .acBody{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  padding:6px 0 calc(28px + env(safe-area-inset-bottom));scrollbar-width:thin;scrollbar-color:#657079 transparent;
  -webkit-user-select:text;user-select:text}
#accountSheet .acView{min-width:0}

/* ---- text ---- */
#accountSheet .acTitle{margin:10px 0 12px;font:800 italic 28px/1.05 var(--disp);letter-spacing:.01em;text-transform:uppercase;overflow-wrap:anywhere}
#accountSheet .acTitle:focus{outline:none}
#accountSheet .acWho .acTitle{margin:0}
#accountSheet .acLead{margin:0 0 14px;font-size:15px;line-height:1.5}
#accountSheet .acSmall{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--dim)}
#accountSheet .acSub{font-size:14px;line-height:1.4;color:var(--dim)}
#accountSheet .acNote{margin:0 0 12px;padding:10px 12px;background:#ffffff0d;font-size:14px;line-height:1.4}
#accountSheet .acNote.ok{border-left:3px solid #7ddc6a}
#accountSheet .acLabel{margin:0 0 6px;font:600 11px/1.2 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
#accountSheet .acVal{font-size:15px;line-height:1.4;overflow-wrap:anywhere}
#accountSheet .acMono{font-family:ui-monospace,Menlo,Consolas,monospace}
#accountSheet .acBack{min-height:44px;padding:0 14px 0 0;border:0;background:transparent;color:var(--dim);
  font:600 15px/1 var(--body);letter-spacing:0;text-transform:none}
@media(hover:hover){#accountSheet .acBack:hover:not(:disabled){background:transparent;color:var(--chrome);transform:none}}

/* ---- layout helpers ---- */
#accountSheet .acStack{display:grid;gap:10px;margin:0 0 6px}
#accountSheet .acAfter{margin-top:14px}
#accountSheet .acRow{display:flex;align-items:center;gap:10px;margin:0 0 10px}
#accountSheet .acGrow{flex:1;min-width:0}
#accountSheet .acBtns{display:flex;gap:6px;flex:none}
#accountSheet .acWho{display:flex;align-items:center;gap:14px;margin:6px 0 14px}
#accountSheet .acWhoText{min-width:0}
#accountSheet .acCard{margin:0 0 12px;padding:14px;border:1px solid var(--line);background:#ffffff08}
#accountSheet .acH{margin:0 0 10px;font:700 11px/1.2 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
#accountSheet .acCard>.acBtn,#accountSheet .acCard>.acConfirm .acBtn{width:100%}
#accountSheet .acCard>.acBtn,#accountSheet .acCard>.acConfirm{margin-top:8px}
#accountSheet .acCard>.acH+.acBtn,#accountSheet .acCard>.acH+.acConfirm{margin-top:0}
#accountSheet .acList{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#accountSheet .acEmpty{padding:8px 0;font-size:14px;color:var(--dim)}

/* ---- buttons ---- */
#accountSheet .acBtn{min-height:48px;padding:10px 16px}
#accountSheet .acSmallBtn{min-height:44px;padding:0 14px;font-size:13px}
#accountSheet .acStack .acBtn,#accountSheet .acFull{width:100%}
#accountSheet .acPrimary{background:var(--flame);border-color:transparent;color:#120f0d;font-weight:800}
@media(hover:hover){#accountSheet .acPrimary:hover:not(:disabled){background:#ff8256;border-color:transparent}}
#accountSheet .acChoice{display:grid;gap:4px;min-height:68px;padding:14px 16px;text-align:left}
#accountSheet .acChoice b{font:800 22px/1 var(--disp);letter-spacing:.06em}
#accountSheet .acChoice span{font:14px/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--dim)}
#accountSheet .acDanger{color:#ffb3a8;border-color:#ff6a5c66}
#accountSheet .acDanger.armed{background:#b3261e;border-color:#ff6a5c;color:#fff}
@media(hover:hover){#accountSheet .acDanger.armed:hover:not(:disabled){background:#c4332a;border-color:#ff6a5c}}
#accountSheet .acConfirm{margin-top:8px}
#accountSheet .acConfirm .acBtn{width:100%}
#accountSheet .acWarn{margin-top:6px;font-size:13px;line-height:1.4;color:#ffb3a8}
#accountSheet .acWarn:empty{display:none}

/* ---- forms ---- */
#accountSheet .acForm{display:block}
#accountSheet .acForm>.acBtn{width:100%;margin-top:4px}
#accountSheet .acForm>.acBtn+.acBtn{margin-top:8px}
#accountSheet .acField{margin:0 0 14px;min-width:0}
#accountSheet .acField label{display:block;margin-bottom:6px;font:600 12px/1.2 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:#b4bbc1}
#accountSheet .acInput{display:block;width:100%;min-width:0;min-height:48px;padding:10px 12px;border:1px solid #f5f1e833;border-radius:8px;
  background:#0b0f17;color:var(--chrome);font:16px/1.3 var(--body);touch-action:manipulation;-webkit-user-select:text;user-select:text}
#accountSheet .acInput:focus{border-color:var(--p2)}
#accountSheet .acInput[aria-invalid]{border-color:#ff6a5c}
#accountSheet .acCodeInput{font:700 20px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase}
#accountSheet .acHint{margin-top:5px;font-size:13px;line-height:1.4;color:var(--dim)}
#accountSheet .acErr{margin-top:5px;font-size:14px;line-height:1.4;color:#ff9b8f}
#accountSheet .acErr:empty{display:none}
#accountSheet .acFormErr{margin:0 0 10px}
#accountSheet .acPwRow{display:flex;gap:8px}
#accountSheet .acPwRow .acInput{flex:1}
#accountSheet .acShow,#accountSheet .acBeside{flex:none;min-width:76px;min-height:48px}
#accountSheet .acCheck{display:flex;align-items:center;gap:12px;min-height:44px;margin:4px 0;font-size:14px;line-height:1.35}
#accountSheet .acCheck input{flex:none;width:22px;height:22px}
#accountSheet select.acInput{appearance:auto}

/* ---- pictures and colours ---- */
#accountSheet .acPortrait{--s:56px;--c:#ffb020;flex:none;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--c);color:#120f0d;font:800 calc(var(--s)*.45)/1 var(--disp)}
#accountSheet .acPortrait.hasImg{background:color-mix(in srgb,var(--c) 28%,#141b22);box-shadow:inset 0 0 0 2px var(--c)}
#accountSheet .acPortrait img{width:100%;height:100%;object-fit:contain}
#accountSheet .acLook{margin:0 0 12px}
#accountSheet .acLookRow{display:flex;align-items:center;gap:14px;margin-bottom:10px}
#accountSheet .acAvatars{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px;margin:0 0 12px}
#accountSheet .acAv{min-height:0;height:62px;padding:2px;display:grid;place-items:center;border-radius:12px;border:2px solid transparent;
  background:#1b242de6;font:800 18px/1 var(--disp)}
#accountSheet .acAv[aria-pressed="true"]{background:#334350;border-color:var(--chrome)}
#accountSheet .acAv img{width:100%;height:100%;object-fit:contain;pointer-events:none}
#accountSheet .acSwatches{display:grid;grid-template-columns:repeat(8,minmax(44px,1fr));gap:2px;max-width:100%}
#accountSheet .acSwatch{justify-self:center;width:44px;height:44px;min-height:0;min-width:0;padding:0;border:0;border-radius:50%;background:transparent;display:grid;place-items:center}
#accountSheet .acSwatch::before{content:'';width:30px;height:30px;border-radius:50%;background:var(--c);border:2px solid transparent}
#accountSheet .acSwatch[aria-pressed="true"]::before{border-color:var(--chrome);box-shadow:0 0 0 2px var(--ink)}
@media(hover:hover){#accountSheet .acSwatch:hover:not(:disabled){background:transparent;transform:none}}

/* ---- a choice of one (parental controls) ---- */
#accountSheet .acControl{margin:0 0 16px}
#accountSheet .acSeg{display:flex;margin:0 0 6px;border:1px solid var(--line)}
#accountSheet .acSegBtn{flex:1;min-width:0;min-height:46px;padding:8px 6px;border:0;border-right:1px solid var(--line);background:transparent}
#accountSheet .acSegBtn:last-child{border-right:0}
#accountSheet .acSegBtn.on{background:var(--chrome);color:var(--ink);box-shadow:inset 0 -3px var(--flame)}

/* ---- family ---- */
#accountSheet .acKid{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 12px;text-align:left;text-transform:none;letter-spacing:0;font:15px/1.3 var(--body)}
#accountSheet .acKid b{display:block;font:700 18px/1.1 var(--disp);letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}
#accountSheet .acGo{font-size:26px;line-height:1;color:var(--dim)}
#accountSheet .acDot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:#59636b}
#accountSheet .acDot.on{background:#7ddc6a;box-shadow:0 0 0 3px #7ddc6a33}
#accountSheet .acApproval{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px;border:1px solid #ffb02055;background:#ffb02014;font-size:14px;line-height:1.4}
#accountSheet .acFriend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 8px 6px 12px;background:#ffffff0d}
#accountSheet .acFriend .acConfirm{margin:0;flex:0 1 auto}
#accountSheet .acFriend .acConfirm .acBtn{width:auto}
#accountSheet .acRolled{font:800 22px/1.1 var(--disp);letter-spacing:.04em;text-transform:uppercase}

/* ---- codes and match history ---- */
#accountSheet .acCodeBox{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 0;padding:12px;background:#0b0f17;border:1px dashed #ffb02099}
#accountSheet .acCode{font:800 26px/1.1 var(--disp);letter-spacing:.1em;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
#accountSheet .acMatch{display:grid;grid-template-columns:auto auto 1fr;gap:2px 10px;align-items:baseline;padding:8px 10px;background:#ffffff0d;border-left:3px solid var(--line)}
#accountSheet .acMatch.won{border-left-color:#7ddc6a}
#accountSheet .acMatch.lost{border-left-color:#ff6a5c}
#accountSheet .acMatch.drawn{border-left-color:#ffb020}
#accountSheet .acRes{font:800 14px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase}
#accountSheet .acScore{font:700 16px/1 var(--disp)}
#accountSheet .acOpp{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
#accountSheet .acWhen{grid-column:1 / -1;font-size:12px;color:var(--dim)}

/* ---- the phone: the whole screen, 16px gutters ---- */
@media(max-width:600px){
  #accountSheet.overlay:not(#menu){padding:0;align-items:stretch}
  #accountSheet .sheet{width:100%;max-height:none;height:100%;border-left:0;border-right:0;border-bottom:0;
    padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
  #accountSheet .acTitle{font-size:26px}
  /* eight 44px targets do not fit across a phone: two rows of four */
  #accountSheet .acSwatches{grid-template-columns:repeat(4,minmax(44px,1fr))}
}