/* Accounts and the shell additions: auth screens, MFA, bell + notifications, command palette, menus,
   Team / Your account / Data pages, AI drafts, @mentions, attachments and saved views. Tokens only. */

/* ---------- auth screens ---------- */
.login .auth-card{width:min(400px,100%);display:flex;flex-direction:column;gap:var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-8);box-shadow:var(--shadow-3)}
.login .auth-card.wide{width:min(600px,100%)}
.login .auth-card .crumb{margin-bottom:var(--s-1)}
.auth-foot{justify-content:center}
.auth-links{justify-content:space-between}
.auth-aside{text-align:right}
.link-btn{border:0;background:none;padding:0;min-height:var(--control-h-sm);color:var(--accent-text);font-weight:550;font-size:var(--t-sm);cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.link-btn:hover{text-decoration-thickness:2px}
.pw-wrap{position:relative;display:block}
.pw-wrap .input{padding-right:44px}
.pw-toggle{position:absolute;right:1px;top:50%;transform:translateY(-50%)}
.pw-toggle[aria-pressed="true"]{color:var(--accent-text)}
.input.otp{font:600 1.35rem/1 var(--f-mono);letter-spacing:.35em;text-align:center;max-width:14ch;padding-inline:12px}
.mono{font-family:var(--f-mono)}
.block{display:block}
.nowrap{white-space:nowrap}
.banner.good{background:var(--good-soft);border-color:transparent;color:var(--good)}

/* MFA setup + recovery codes */
.mfa-steps{margin:0;padding-left:1.25em;display:flex;flex-direction:column;gap:var(--s-5)}
.mfa-steps>li>b{display:block;margin-bottom:var(--s-3)}
.mfa-scan{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:flex-start}
.qr-box{width:176px;max-width:100%;flex:none;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.qr{display:block;width:100%;height:auto}
.qr-bg{fill:var(--qr-light)} .qr-fg{fill:var(--qr-dark)}
.mfa-secret{flex:1 1 220px;display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.secret{font-size:var(--t-md);background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;overflow-wrap:break-word;letter-spacing:.04em}
.mfa-confirm{flex-wrap:nowrap}
.codes-box{display:flex;flex-direction:column;gap:var(--s-3)}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px var(--s-4);margin:0;padding:var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 1.5em);background:var(--sunken);border:1px dashed var(--line-strong);border-radius:var(--r-md);font-size:var(--t-md)}

/* ---------- sidebar additions ---------- */
.side-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.bell{position:relative}
.bell-n:empty{display:none}
.bell-n{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--bad-solid);color:var(--on-board);font:700 .68rem/18px var(--f-body);text-align:center;box-shadow:0 0 0 2px var(--side)}
html.has-unread .menu-btn{position:relative}
html.has-unread .menu-btn::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--bad-solid);box-shadow:0 0 0 2px var(--bg)}
.search-trigger{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--muted);cursor:pointer;font-size:var(--t-sm);text-align:left;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.search-trigger:hover{border-color:var(--line-input);color:var(--ink)}
.me{flex-wrap:wrap}
.me-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.me .who .me-tags span{font-size:.68rem}
.team-chip{display:inline-flex;align-items:center;border-radius:var(--r-xs);padding:1px 7px;font-size:var(--t-xs);font-weight:600;white-space:nowrap;background:var(--sunken);color:var(--ink-2);line-height:1.5}
.tc-sales{background:var(--ch-sms-soft);color:var(--ch-sms)}
.tc-marketing{background:var(--ch-email-soft);color:var(--ch-email)}
.tc-delivery{background:var(--good-soft);color:var(--good)}
.tc-dev{background:var(--ch-call-soft);color:var(--ch-call)}
.chips{display:inline-flex;flex-wrap:wrap;gap:4px}

/* ---------- floating panels: notifications, menus, views ---------- */
.pop-panel{position:fixed;z-index:60;left:clamp(8px,var(--pop-left,8px),calc(100vw - 388px));top:var(--pop-top,56px);width:min(380px,calc(100vw - 16px));max-height:min(560px,calc(100dvh - var(--pop-top,56px) - 12px));display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3);overflow:hidden}
.pop-head{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-3) var(--s-2) var(--s-4)}
.pop-head h2{flex:1;font-size:var(--t-md)}
.notes-seg{margin:0 var(--s-4) var(--s-2);align-self:flex-start}
.notes{list-style:none;margin:0;padding:0 var(--s-2) var(--s-2);overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.note{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:0;background:none;padding:10px;border-radius:var(--r-md);cursor:pointer;color:var(--ink);position:relative}
.note:hover{background:var(--hover)}
.note b{display:block;font-size:var(--t-sm);font-weight:550}
.note.unread b{font-weight:700}
.note-body{display:block;font-size:var(--t-sm);color:var(--ink-2);overflow-wrap:anywhere}
.note-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px}
.notes-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--s-8) var(--s-4);text-align:center;color:var(--muted)}
.notes-empty .ico{width:26px;height:26px}
.notes-empty b{color:var(--ink)}
.pop-foot{border-top:1px solid var(--line);padding:var(--s-2) var(--s-4)}
.menu{position:fixed;z-index:70;min-width:220px;max-width:min(320px,calc(100vw - 16px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:var(--s-1);display:flex;flex-direction:column}
.menu [role=menuitem]{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;border:0;background:none;border-radius:var(--r-sm);padding:6px 10px;cursor:pointer;text-align:left;color:var(--ink);font-size:var(--t-sm)}
.menu [role=menuitem]:hover,.menu [role=menuitem]:focus-visible{background:var(--hover);outline:none}
.menu [role=menuitem] .xs{display:block}
.menu [role=menuitem].danger{color:var(--bad)}
.menu [aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.menu-sep{height:1px;background:var(--line);margin:var(--s-1) 0}

/* ---------- command palette ---------- */
.modal.palette-modal{width:min(640px,100%);padding:0;gap:0;margin-top:8vh;overflow:hidden}
.pal-input{display:flex;align-items:center;gap:10px;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line)}
.pal-input .ico{color:var(--muted)}
.pal-input input{border:0;background:none;outline:none;font-size:var(--t-lg);min-height:40px;min-width:0}
.pal-input input::-webkit-search-cancel-button{display:none}
.pal-list{max-height:min(420px,60dvh);overflow-y:auto;padding:var(--s-2)}
.pal-label{font-size:var(--t-xs);font-weight:650;color:var(--muted);padding:var(--s-2) var(--s-2) var(--s-1);letter-spacing:.02em}
.pal-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;min-height:44px;border-radius:var(--r-sm);cursor:pointer}
.pal-opt .ico{color:var(--muted)}
.pal-opt .grow>*{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-opt[aria-selected="true"]{background:var(--accent-soft)}
.pal-opt[aria-selected="true"] .ico{color:var(--accent-text)}
.pal-empty{padding:var(--s-6) var(--s-4);text-align:center;color:var(--muted);font-size:var(--t-sm)}
.pal-foot{display:flex;gap:var(--s-4);padding:var(--s-2) var(--s-4);border-top:1px solid var(--line);flex-wrap:wrap}
.pal-foot .kbd{margin-right:3px}

/* ---------- tabs and admin tables ---------- */
.tabs{display:flex;gap:var(--s-1);border-bottom:1px solid var(--line);margin-bottom:var(--s-5);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs [role=tab]{border:0;background:none;padding:10px 14px;min-height:44px;font-weight:550;color:var(--muted);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-sm) var(--r-sm) 0 0;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.tabs [role=tab]:hover{color:var(--ink);background:var(--hover)}
.tabs [role=tab][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
[role=tabpanel]:focus{outline:none}
.tab-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin-bottom:var(--s-4)}
.person{display:flex;align-items:center;gap:10px;min-width:200px}
.person .grow>.xs.block{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
tr.inactive td{color:var(--muted)}
tr.inactive .av{opacity:.55}
.icon-btn-gap{display:inline-block;width:34px}
.choice-list{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.choice-list legend{margin-bottom:var(--s-2)}
.choice{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.choice:hover{border-color:var(--line-input)}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice input{margin-top:3px}
.choice>span>b{display:block;font-size:var(--t-sm)}
.choice.locked{opacity:.6;cursor:not-allowed}
.link-box{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3) var(--s-4);background:var(--sunken);border:1px dashed var(--line-strong);border-radius:var(--r-md)}
.link-box .row{flex-wrap:nowrap}
.team-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--s-4)}
.team-card{display:flex;flex-direction:column;gap:var(--s-3)}
.grant-list,.can-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--t-sm)}
.grant-list li{padding-left:14px;position:relative}
.grant-list li::before{content:"";position:absolute;left:2px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.audit-filters{padding:0;background:none;border:0;margin-bottom:var(--s-4)}
.audit{list-style:none;margin:0;padding:0}
.au-item{display:flex;gap:var(--s-3);padding:10px 0;border-bottom:1px solid var(--line)}
.au-dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);margin-top:7px;flex:none}
.au-item.good .au-dot{background:var(--good)} .au-item.bad .au-dot{background:var(--bad)}
.au-more{padding:var(--s-4) 0;text-align:center}
.outbox{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.ob-item{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-3) var(--s-4)}
.ob-item .pill{margin-right:6px}

/* ---------- your account ---------- */
.pf-id{display:flex;align-items:center;gap:var(--s-3)}
.swatches{border:0;margin:0;padding:0;display:flex;gap:var(--s-2);flex-wrap:wrap}
.swatches legend{margin-bottom:var(--s-2)}
.swatch-pick{position:relative;display:inline-grid;place-items:center;width:var(--touch);height:var(--touch);cursor:pointer}
.swatch-pick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.swatch-pick .swatch{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px var(--surface)}
.swatch-pick input:checked+.swatch{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.swatch-pick input:focus-visible+.swatch{outline:2px solid var(--focus);outline-offset:4px}
.av.bg-pine,.av.bg-sky,.av.bg-plum,.av.bg-clay,.av.bg-sand,.av.bg-slate{color:var(--on-board)}
.sessions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.session{display:flex;align-items:center;gap:var(--s-3);padding:10px 0;border-bottom:1px solid var(--line)}
.session:last-child{border-bottom:0}
.session .grow>.xs{display:block}
.ses-ico{width:36px;height:36px;border-radius:var(--r-sm);background:var(--sunken);display:grid;place-items:center;color:var(--muted);flex:none}
.prefs th.c,.prefs td.c{text-align:center;width:110px}
.access-page{max-width:980px}
.access-hero h2{margin:var(--s-3) 0 var(--s-2)}
.ah-id{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.access-hero .access-pill{font-size:var(--t-sm);padding:3px 12px}
.can-list li{display:flex;gap:8px;align-items:flex-start}
.can-list .ico{width:16px;height:16px;margin-top:2px}
.can-list .yes .ico{color:var(--good)}
.can-list .no{color:var(--muted)}
.can-list .no .ico{color:var(--line-strong)}

/* ---------- AI drafts ---------- */
.ai-btn .ico{color:var(--accent-text)}
.btn.primary.ai-btn .ico{color:inherit}
.board-head .ai-btn .ico{color:inherit}
.field-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);font-weight:550;color:var(--ink-2)}
.ai-panel{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--accent-soft);border-left:3px solid var(--accent);border-radius:var(--r-md);background:var(--surface);margin-top:var(--s-2)}
.ai-panel.is-error{border-left-color:var(--bad)}
.ai-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai-head .ico{color:var(--accent-text)}
.ai-head b{flex:1;min-width:0}
.ai-tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-xs);font-weight:650;border-radius:var(--r-pill);padding:2px 9px;background:var(--accent-soft);color:var(--accent-text)}
.ai-tag .ico{width:12px;height:12px}
.ai-tag.tpl{background:var(--sunken);color:var(--muted)}
.ai-body{display:flex;flex-direction:column;gap:var(--s-3);font-size:var(--t-sm);overflow-wrap:anywhere}
.ai-list{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:3px}
.ai-sec .label{margin-bottom:4px}
.ai-next{display:flex;gap:8px;align-items:flex-start;color:var(--accent-text)}
.ai-actions{gap:var(--s-2)}
.ai-improve{margin-top:var(--s-1)}
.ai-improve .row{gap:6px}
.sm-select{width:auto;min-height:var(--control-h-sm);font-size:var(--t-sm);padding:2px 8px}
.ai-compose{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2)}
.ai-compose>div{align-self:stretch}
.proposals{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.proposals li{padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-sm)}
.proposals .chk{align-items:center}
.proposals .chk .input{flex:1}
.ai-report{font-size:var(--t-md)}
.od-ai{margin-bottom:var(--s-3)}
.is-loading .skel-line{height:10px}

/* ---------- @mentions ---------- */
.mention-wrap,.mention-host{position:relative;display:block}
.mention-pop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:var(--s-1);max-height:260px;overflow-y:auto}
.mention-opt{display:flex;align-items:center;gap:10px;padding:6px 8px;min-height:40px;border-radius:var(--r-sm);cursor:pointer}
.mention-opt[aria-selected="true"]{background:var(--accent-soft)}
.mention-opt b{display:block;font-size:var(--t-sm)}
.mention{color:var(--accent-text);font-weight:650;background:var(--accent-soft);border-radius:var(--r-xs);padding:0 3px}

/* ---------- attachments ---------- */
.files{display:flex;flex-direction:column;gap:var(--s-2)}
.drop{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border:1.5px dashed var(--line-strong);border-radius:var(--r-md);cursor:pointer;color:var(--ink-2);font-size:var(--t-sm);transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.drop:hover,.drop:focus-within{border-color:var(--accent)}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop .ico{color:var(--accent-text);width:22px;height:22px}
.drop.big{padding:var(--s-8) var(--s-5);justify-content:center;text-align:left}
.link-like{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.upl{display:flex;align-items:center;gap:var(--s-3)}
.upl .meter{flex:0 0 40%}
.upl .meter>i{transform-origin:left;transform:scaleX(var(--p,0))}
.file-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.file{display:flex;align-items:center;gap:var(--s-3);padding:6px 0;border-bottom:1px solid var(--line)}
.file:last-child{border-bottom:0}
.file .grow>*{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-name{font-weight:550;font-size:var(--t-sm)}
.file-ico{position:relative;width:34px;height:38px;display:grid;place-items:center;color:var(--muted);flex:none}
.file-ico .ico{width:34px;height:34px}
.file-ico span{position:absolute;bottom:3px;font:700 .5rem/1 var(--f-body);background:var(--ink-2);color:var(--surface);border-radius:3px;padding:1px 3px}
.ext-pdf span{background:var(--bad)} .ext-png span,.ext-jpg span,.ext-jpeg span,.ext-gif span,.ext-webp span{background:var(--ch-call)}
.ext-csv span,.ext-xlsx span{background:var(--good)} .ext-docx span,.ext-txt span{background:var(--info)} .ext-pptx span{background:var(--warn)}

/* ---------- saved views ---------- */
.views-pop{width:min(300px,calc(100vw - 16px));padding:var(--s-2);gap:var(--s-2)}
.view-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto}
.view-list li{display:flex;align-items:center;gap:2px}
.view-apply{flex:1;min-width:0;text-align:left;border:0;background:none;border-radius:var(--r-sm);padding:6px 8px;min-height:40px;cursor:pointer;color:var(--ink)}
.view-apply:hover{background:var(--hover)}
.view-apply b,.view-apply span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-sm)}
.view-empty{padding:var(--s-2)}
.icon-btn.armed{color:var(--bad);background:var(--bad-soft)}

/* ---------- data & reports ---------- */
.export-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2);max-width:900px}
.export-item{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-3) var(--s-4)}
.export-item .row{flex-wrap:nowrap}
.export-item .select,.export-item .input{width:auto;max-width:200px}
.import-box{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-4)}
.import-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:var(--s-4) 0}
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:var(--s-3)}
.import-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-top:var(--s-4)}
.import-done{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);margin-top:var(--s-4)}
tr.row-bad td{background:var(--bad-soft)}
.pad{padding:var(--s-3) var(--s-4)}
.report-table{margin-top:var(--s-4)}
section.panel.flush{padding:0;overflow:hidden}

@media (max-width:760px){
  .login .auth-card{padding:var(--s-6)}
  .codes{grid-template-columns:1fr 1fr;padding-left:calc(var(--s-3) + 1.5em)}
  .hide-sm{display:none}
  .pop-panel{left:8px;right:8px;width:auto;top:calc(env(safe-area-inset-top,0px) + 8px);max-height:calc(100dvh - 16px)}
  .modal.palette-modal{margin-top:0}
  .export-item .row{flex-wrap:wrap}
  .mfa-confirm{flex-wrap:wrap}
}
@media (pointer:coarse){
  .search-trigger,.pal-opt,.view-apply,.menu [role=menuitem]{min-height:var(--touch)}
  .link-btn{min-height:var(--touch)}
}