/* outreach — style tego obszaru (tokeny z app.css; ILT i Szkło muszą działać oba) */
/* Szukanie: oś etapów całego procesu */
.ls-steps{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:4px}
.ls-steps li{display:grid;grid-template-columns:22px minmax(150px,230px) auto 1fr;align-items:baseline;gap:8px;font-size:13px;color:var(--muted)}
.ls-steps .st-i{font:700 13px var(--mono);text-align:center}
.ls-steps .st-done{color:var(--ink)} .ls-steps .st-done .st-i{color:var(--green)}
.ls-steps .st-running{color:var(--ink)} .ls-steps .st-running .st-i{color:var(--accent);animation:ls-pulse 1.2s ease-in-out infinite}
.ls-steps .st-skipped{opacity:.55}
.ls-steps .st-n{font:600 12px var(--mono);padding:0 6px;border-radius:6px;background:var(--gold-soft)}
.ls-steps small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes ls-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.ls-steps .st-running .st-i{animation:none}}
.is-phone .ls-steps li{grid-template-columns:22px 1fr auto}.is-phone .ls-steps small{grid-column:2/-1;white-space:normal}
/* Szablony */
.tp-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto auto;align-items:center;gap:14px}
.tp-item.off{opacity:.62}
.tp-stat{text-align:center;min-width:54px}.tp-stat b{display:block;font-size:16px}.tp-stat small{color:var(--muted);font-size:11px}
.tp-days{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;align-items:end;height:130px;margin:10px 0 6px}
.tp-day{display:flex;flex-direction:column;align-items:center;gap:2px;height:100%}
.tp-day .tp-n{font:600 10px var(--mono);color:var(--muted);height:12px}
.tp-col{position:relative;flex:1;width:100%;max-width:22px}
.tp-col i{position:absolute;bottom:0;left:0;right:0;border-radius:5px 5px 2px 2px;min-height:0}
.tp-sent{background:var(--accent)} .tp-rep{background:var(--green);left:22%!important;right:22%!important}
.tp-day small{font:10px var(--mono);color:var(--muted)}
.tp-key{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px}
.tp-bars{display:grid;gap:8px;margin-top:10px}
.tp-bar{display:grid;grid-template-columns:150px 1fr 40px 54px;align-items:center;gap:8px;font-size:12px}
.tp-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tp-bar small{color:var(--muted);font:11px var(--mono)}
.tp-bar .bar{margin:0}
.is-phone .tp-item{grid-template-columns:1fr auto}.is-phone .tp-bar{grid-template-columns:100px 1fr 36px}.is-phone .tp-bar small{display:none}

/* ---------- Telefon: warstwy jak w Poczcie (działy → dział → szczegół); stan w #main[data-olvl] ---------- */
.is-phone #main[data-olvl="home"]{min-height:calc(100vh / var(--scale) - 260px)}
.is-phone #main[data-olvl="detail"] > :not(.out-grid){display:none}
.is-phone #main[data-olvl="detail"] .out-grid > .card:first-child{display:none}
.is-phone #main[data-olvl="sec"] .out-grid > .out-card{display:none}
.is-phone .out-list{max-height:none;overflow:visible}
.is-phone .out-grid{display:block}
.is-phone .out-grid > .card{min-height:calc(100vh / var(--scale) - 300px);min-height:calc(100dvh / var(--scale) - 300px)}
.is-phone #main.go-fwd > *{animation:mail-in-fwd .28s cubic-bezier(.32,.72,0,1)}
.is-phone #main.go-back > *{animation:mail-in-back .28s cubic-bezier(.32,.72,0,1)}
@media (prefers-reduced-motion:reduce){.is-phone #main > *{animation:none!important}}
.is-phone .hdr-actions > .m-back{flex:0 0 auto;min-width:0}
.is-phone .out-item.sel{background:none}

.o-qhead{justify-content:flex-end;margin:-4px 0 8px}
.ou-svc.off{opacity:.62}
.ou-svc{flex-wrap:wrap;gap:12px}

/* suwak jak w iOS: wyłączony szary, włączony zielony, gałka przesuwa się płynnie */
.ios-sw{position:relative;flex:none;width:51px;height:31px;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--muted) 45%,transparent);cursor:pointer;transition:background-color .25s ease;-webkit-tap-highlight-color:transparent}
.ios-sw i{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.08);transition:transform .28s cubic-bezier(.32,.72,0,1),width .2s ease}
.ios-sw[aria-checked="true"]{background:#34c759}
.ios-sw[aria-checked="true"] i{transform:translateX(20px)}
.ios-sw:active i{width:32px}
.ios-sw[aria-checked="true"]:active i{transform:translateX(15px)}
.ios-sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ios-sw,.ios-sw i{transition:none}}
.kpi.kpi-switch{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kpi.kpi-switch b{display:block}
.kpi.kpi-switch b.on{color:var(--green)}.kpi.kpi-switch b.off{color:var(--red)}

/* ---------- DNC / Leady: odstępy i panele pod nagłówkiem ----------
   Filtry mają odstęp od siatki. Na desktopie lista i karta szczegółów mieszczą się w oknie pod nagłówkiem i filtrami (wysokość = okno − .hdr − filtry − odstępy;
   --out-hdr i --out-flt mierzą outSyncHdr/outFitPanels w outreach.js) i przewijają się we własnej ramce — przewijanie strony wsuwa pod nagłówek co najwyżej filtry.
   Telefon i wąskie okno: zwykły przepływ (warstwy jak w OUT.lvl). */
.dnc-filters{margin-bottom:var(--gap)}
@media(min-width:1001px){
  html:not(.is-phone) .dnc-grid > .card{max-height:max(320px,calc(100vh / var(--scale) - var(--out-hdr,66px) - var(--out-flt,110px) - 1.5 * var(--pad) - 2 * var(--gap)));overflow:auto}
}
/* Leady: pasek akcji masowych + tabela (szersza lista niż w DNC: osiem kolumn) */
@media(min-width:1001px){.dnc-grid.ld-grid{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)}}
.ld-bulk{gap:8px 10px;margin-bottom:4px;align-items:center}
.ld-bulk .o-all b{font-weight:600;font-size:13px}
.ld-table th,.ld-table td{font-size:12.5px}
.ld-table td:nth-child(3),.ld-table td:nth-child(4),.ld-table td:nth-child(8){word-break:break-word}
.ld-table td small{color:var(--muted)}
.is-phone .ld-table{min-width:640px}
/* Styl: edytor */
#st-card .tab .n{margin-left:6px}
#st-card .row{gap:8px 10px}
#st-bl .chip button{margin-left:2px}
.jv-c{display:block}

/* ---------- Karta leada (Outreach + okno w Poczcie): hierarchia, siatka 8 pt, kontrolka segmentowa, lista grupowana ---------- */
.lcx{display:flex;flex-direction:column;gap:20px;min-width:0}
.out-card .lcx>*,.lead-box .lcx>*{margin:0}
.lcx-head{display:flex;flex-direction:column;gap:12px}
.lcx-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0;flex-wrap:nowrap}
.lcx-title h2{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere;min-width:0}
.lcx-tags{display:flex;gap:6px;flex:none;padding-top:4px}
.lcx-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.lcx-meta .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcx .note-block{margin:0;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.lcx .note-block p{margin-top:6px;line-height:1.45}
.lcx-actions{display:flex;flex-direction:column;gap:10px;margin:0}
.lcx-primary,.lcx-secondary{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.lcx-primary .btn{min-height:40px;padding:0 20px;border-radius:999px;font-weight:600}
.lcx-secondary .btn{min-height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:500}
.lcx-secondary .lcx-star{width:34px;padding:0;color:var(--muted)}
.lcx-secondary .lcx-star.on{color:var(--accent)}
.lcx-secondary .lcx-dnc{margin-left:auto}
.lcx-sec{display:flex;flex-direction:column;gap:8px}
.lcx-sec h4{margin:0;font-weight:600;color:var(--muted)}
.lcx-sec textarea{width:100%;border-radius:12px;resize:vertical;min-height:64px}
.lcx-seg{display:flex;gap:2px;padding:3px;border-radius:12px;background:color-mix(in srgb,var(--ink) 8%,transparent);margin:0}
.lcx-seg .tab{flex:1 1 0;min-width:0;min-height:32px;padding:0 6px;border:0;border-radius:9px;background:transparent;color:var(--ink);font-size:13px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .2s,box-shadow .2s}
.lcx-seg .tab.active{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.1);font-weight:600}
[data-style="glass"] .lcx-seg .tab.active{background:var(--seg-on,rgba(255,255,255,.2))}
.lcx-list{border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--ink) 5%,transparent);border:1px solid var(--line)}
.lcx-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
.lcx-row+.lcx-row{border-top:1px solid var(--line)}
.lcx-row:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.lcx-row .tag{justify-self:start;min-width:40px;text-align:center}
.lcx-row .who{min-width:0;display:flex;flex-direction:column;gap:2px}
.lcx-row .who b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcx-row .who small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcx-row .meta{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.lcx-row .mail-body{grid-column:1/-1;margin:4px 0 0;padding:12px;border-radius:10px;background:color-mix(in srgb,var(--ink) 6%,transparent);white-space:pre-wrap;font:inherit;font-size:13px;line-height:1.45;max-height:260px;overflow:auto}
.lcx .empty{padding:16px;text-align:center;color:var(--muted)}
.is-phone .lcx-title h2{font-size:19px}
.is-phone .lcx-row{grid-template-columns:40px minmax(0,1fr);row-gap:2px}
.is-phone .lcx-row .meta{grid-column:2}
.is-phone .lcx-primary .btn{flex:1 1 100%}
.is-phone .lcx-seg .tab{font-size:12px;padding:0 2px;letter-spacing:-.02em}