/* Account bar, sign-in screens and dialogs for the signed-in portal (connect.js). Uses the portal's own colours and font. */
#spbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 16px;background:var(--acc2,#0b2239);color:var(--sideink,#d9e4ee);font:14px/1.3 var(--font,system-ui)}
#spbar .spwho{font-weight:600;color:#fff}
.sprole{font-weight:500;font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(184,228,250,.16);color:#d9e4ee;margin-left:4px}
.spsave{flex:1;min-width:140px;font-size:13px;color:#b7c6d4}
.spsave.saving,.spsave.pending{color:#d9e4ee}.spsave.retry{color:#ffd88a}.spsave.error{color:#ffb4ae}
.spview{font-size:13px;color:#ffd88a}
.spbtn{font:600 14px/1.2 var(--font,system-ui);border:1px solid transparent;border-radius:8px;padding:8px 14px;background:var(--acc,#1463ad);color:#fff;cursor:pointer}
.spbtn:hover{filter:brightness(1.08)}.spbtn:focus-visible,.sptabbtn:focus-visible,.spx:focus-visible{outline:3px solid #b8e4fa;outline-offset:2px}
.spbtn.small{padding:5px 10px;font-size:13px}
.spbtn.ghost{background:transparent;border-color:currentColor;color:inherit}
#spdlg .spbtn.ghost,#spscreen .spbtn.ghost{color:var(--acc,#1463ad)}
.spbtn.danger{background:var(--red,#a8231b)}
#spscreen{min-height:100vh;display:grid;place-items:center;background:var(--bg,#eef1f4);padding:24px;font:16px/1.5 var(--font,system-ui);color:var(--ink,#17202b)}
.spcard{background:var(--card,#fff);border:1px solid var(--line,#d6dce3);border-radius:16px;padding:32px;max-width:460px;width:100%;box-shadow:0 10px 40px rgba(11,34,57,.08)}
.spcard h1{font-size:24px;margin:10px 0 14px}
.spnote{background:var(--accbg,#e6f0fa);border-radius:10px;padding:10px 12px}
.spmute{color:var(--mute,#566070);font-size:14px}
.sprow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sprow input[readonly]{flex:1;min-width:200px;font:13px var(--font,system-ui);padding:6px 8px;border:1px solid var(--line,#d6dce3);border-radius:6px}
.spfld{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;min-width:180px;flex:1}
.spfld.wide{flex-basis:100%}
.spfld input,.spfld select,.spfld textarea,.sptab select{font:15px var(--font,system-ui);padding:8px 10px;border:1px solid var(--line,#d6dce3);border-radius:8px;background:#fff;color:var(--ink,#17202b);font-weight:400}
.spchk{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin:6px 0;flex-basis:100%}
.spform{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:8px 0 14px}
#spdlg{border:none;border-radius:16px;padding:0;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);font:15px/1.5 var(--font,system-ui);color:var(--ink,#17202b);box-shadow:0 30px 80px rgba(0,0,0,.3)}
#spdlg.wide{width:min(900px,calc(100vw - 32px))}
#spdlg::backdrop{background:rgba(11,34,57,.45)}
.spdh{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line,#d6dce3);position:sticky;top:0;background:var(--card,#fff);z-index:1}
.spdh h2{font-size:19px;margin:0}
.spx{border:none;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--mute,#566070);padding:2px 8px;border-radius:6px}
.spdb{padding:16px 22px 22px}
.spdb h3{font-size:16px;margin:20px 0 6px}
.sptab{width:100%;border-collapse:collapse;font-size:14px}
.sptab td,.sptab th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line,#d6dce3);vertical-align:top}
.sphelp{font-size:13px;color:var(--mute,#566070);padding-left:18px;margin:0}
.spmsg{min-height:1em;color:var(--red,#a8231b);font-size:14px;font-weight:600}.spmsg.ok{color:var(--grn,#1c6636)}
.sptabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.sptabbtn{font:600 13px var(--font,system-ui);border:1px solid var(--line,#d6dce3);background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--ink,#17202b)}
.sptabbtn[aria-pressed=true]{background:var(--acc2,#0b2239);color:#fff;border-color:var(--acc2,#0b2239)}
.spreq{border:1px solid var(--line,#d6dce3);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.spreq p{margin:4px 0}.spreq header{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sppurpose{background:var(--bg,#eef1f4);border-radius:8px;padding:8px 10px;font-size:14px;white-space:pre-wrap}
.spinv{font-size:13px;margin:6px 0;padding-left:18px}
.spact:not(:empty){margin-top:10px;padding-top:10px;border-top:1px dashed var(--line,#d6dce3)}
.spchip{font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--grybg,#e8eaed);color:var(--gry,#4d5663)}
.spchip.new{background:var(--accbg,#e6f0fa);color:var(--acc,#1463ad)}.spchip.invoiced{background:var(--ambbg,#fcf0d0);color:var(--amb,#7a5200)}
.spchip.paid,.spchip.granted{background:var(--grnbg,#e0f2e6);color:var(--grn,#1c6636)}
.spinvframe{width:100%;height:60vh;border:1px solid var(--line,#d6dce3);border-radius:8px;background:#fff}
.spwake{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;background:var(--acc2,#0b2239);color:#fff;padding:10px 16px;border-radius:10px;font:14px var(--font,system-ui);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:640px){
 #spbar{padding:6px 12px;gap:6px 8px;font-size:13px}
 #spbar .spwho{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #spbar .sprole{display:none}
 #spbar .spbtn.small{padding:4px 8px;font-size:12px}
 .spwide{display:none}
 .spsave{flex-basis:100%;order:3;min-width:0;font-size:12px}
 .sptab thead{display:none}
 .sptab tr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px;padding:10px 0;border-bottom:1px solid var(--line,#d6dce3)}
 .sptab td{border:0;padding:0;width:auto!important}
 .sptab td:first-child{grid-column:1/-1}
 .spdb{padding:14px 16px 18px}
 .spfld{min-width:0;flex-basis:100%}
}
body:has(#spscreen) .app{display:none}
.sptab td{overflow-wrap:anywhere}.sptab td:last-child{white-space:nowrap;width:1%}
.sptab{min-width:0}