/* Rally2Rumble - styles for the sponsor app additions (sidebar groups, next steps, pipeline bar, Email page, weekly card, AI assistant).
   Loaded after theme.css on every app page. Colours come from the theme tokens only, so dark and light mode both work. */

/* ----- balance between light and dark: same structure in both, a little depth in light mode ----- */
:root[data-theme="light"] .card,:root[data-theme="light"] .stat,:root[data-theme="light"] .item,:root[data-theme="light"] .modal,:root[data-theme="light"] .drawer{box-shadow:0 1px 3px rgba(20,20,25,.10)}
:root[data-theme="light"] aside{background:var(--panel)}
:root[data-theme="light"] input,:root[data-theme="light"] select,:root[data-theme="light"] textarea{background:#fff}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--bg)}
input::placeholder,textarea::placeholder{color:var(--mute);opacity:1}
.mute,small{color:var(--mute)}
.pill{background:var(--line);color:var(--ink)}
.chip{border:1px solid var(--line)}

/* ----- sidebar groups ----- */
.navh{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:16px 12px 6px}
.navh:first-child{padding-top:4px}
.aibtn{margin:14px 0 0}
@media(max-width:820px){.navh{display:none}}

/* ----- dashboard: next steps + pipeline bar ----- */
.item.ns{padding:0;align-items:stretch}
.item.ns .ns-main{flex:1;min-width:0;padding:14px;color:inherit;text-decoration:none}
.item.ns .ns-main small{display:block}
.item.ns .btn{align-self:center;margin:0 12px 0 0;white-space:nowrap}
.item.ns-reply{border-left:4px solid var(--ink)}
.item.ns-followup{border-left:4px solid var(--accent2)}
.btn.sm,button.sm{padding:6px 14px;font-size:13px}
.pbar{display:flex;height:14px;overflow:hidden;border:1px solid var(--line)}
.pbar i{display:block;min-width:6px}
.plegend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 4px;font-size:13px;color:var(--mute)}
.plegend span{display:inline-flex;align-items:center;gap:6px}
.plegend i{display:inline-block;width:10px;height:10px;border:1px solid var(--line)}
.plegend b{color:var(--ink)}

/* ----- weekly suggestions ----- */
.wk-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.wk-row:last-of-type{border-bottom:0}
.wk-main{flex:1;min-width:0}.wk-main b,.wk-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.wk .btn.block{margin-top:12px}

/* ----- Email page ----- */
.ml-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:18px;align-items:start}
.ml-grid .stack>.card+.card,.ml-grid .stack>.card+div{margin-top:14px}
.ml-f{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.ml-f>*{flex:1;min-width:140px}
.ml-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.ml-all,.ml-ack{display:flex;gap:8px;align-items:center;font-weight:600;margin:0}
.ml-all input,.ml-ack input,.ml-row input,.ml-opt input{width:auto;margin:0}
.ml-ack{margin:14px 0 4px}
.ml-list{max-height:520px;overflow:auto}
.ml-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);margin:0;font-weight:400;cursor:pointer}
.ml-row.off{opacity:.55;cursor:default}
.ml-main{flex:1;min-width:0}.ml-main b,.ml-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;max-width:46%}
.ml-r small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ml-opt{display:flex;gap:10px;align-items:flex-start;padding:8px 0;margin:0;font-weight:400;cursor:pointer}
.ml-opt small{display:block}.ml-opt.off{opacity:.55;cursor:not-allowed}
.ml-pv{border:1px solid var(--line);padding:12px;background:var(--bg)}
.ml-pv pre{margin:8px 0 0;white-space:pre-wrap;font:inherit}
.ml-pn{display:inline-flex;gap:6px;align-items:center}
.ml-warn,.ml-ok{padding:10px 12px;margin-top:12px;border:1px solid var(--line);font-size:14px}
.ml-warn{border-left:4px solid var(--ink)}.ml-ok{border-left:4px solid var(--accent2)}
.ml-qr{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.ml-qr.opened span:first-child{color:var(--mute)}
.ml-q .block{margin-top:12px}
@media(max-width:900px){.ml-grid{grid-template-columns:1fr}}

/* ----- AI assistant ----- */
.aipanel{position:fixed;right:16px;bottom:64px;z-index:14;width:380px;max-width:calc(100vw - 24px);height:min(620px,calc(100vh - 90px));display:none;flex-direction:column;background:var(--panel);border:1px solid var(--ink);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.aipanel.on{display:flex}
.ai-hd{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.ai-hd span{display:flex;gap:6px}
.ai-log{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.ai-m{max-width:92%}
.ai-m.me{align-self:flex-end}
.ai-t{white-space:pre-wrap;padding:9px 12px;font-size:14px;line-height:1.45;background:var(--bg);border:1px solid var(--line)}
.ai-m.me .ai-t{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ai-m.err .ai-t{border-color:var(--ink)}
.ai-a{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 0}
.ai-in{display:flex;gap:8px;padding:10px 12px 4px}
.ai-in textarea{flex:1;resize:none;min-height:40px;max-height:120px;padding:9px;font:inherit}
.ai-note{padding:0 12px 10px;color:var(--mute);font-size:12px}
.ai-key{padding:8px 12px 0}.ai-keyrow{display:flex;gap:8px;margin-top:6px}.ai-keyrow input{flex:1}
@media(max-width:820px){.aipanel{right:0;bottom:0;width:100%;max-width:100%;height:80vh}}
@media print{.aipanel,.aibtn{display:none!important}}

/* ----- Discover: grouped category chips ----- */
.dc-gl{width:100%;margin:10px 0 4px}
.dc-gl:first-child{margin-top:0}
.dc-types .chips{display:flex;flex-wrap:wrap;gap:6px}