/* Specimen faces for the funnel editor's font dropdown (#223). Served from the CRM's own
   origin, not actionscalemarketing.com: a cross-origin @font-face needs CORS headers Vercel does not send
   for static assets, and would fall back to a system face - making the 'preview' a lie. */
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url('/crm/fonts/oswald-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url('/crm/fonts/oswald-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/crm/fonts/anton-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/crm/fonts/anton-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('/crm/fonts/bebasneue-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('/crm/fonts/bebasneue-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('/crm/fonts/archivoblack-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('/crm/fonts/archivoblack-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/crm/fonts/ibmplexsans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/crm/fonts/ibmplexsans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/crm/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/crm/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/crm/fonts/worksans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/crm/fonts/worksans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--bg:#eef1f7;--card:#fff;--ink:#171a21;--muted:#6b7280;--line:#e6e8ee;--soft:#f6f7fb;
  --accent:#FF631F;--accent2:#e04d0d;--accent-soft:#fff1ea;--green:#16a34a;--green-soft:#dcfce7;
  --red:#dc2626;--red-soft:#fee2e2;--amber:#d97706;--amber-soft:#fef3c7;--gold:#FFB23E;--dark:#111827}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px}
button{font-family:inherit;cursor:pointer}
a{color:var(--accent);text-decoration:none}
/* ---------- login ---------- */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.gate .box{background:var(--card);border-radius:22px;padding:34px 34px 26px;max-width:440px;width:100%;box-shadow:0 30px 60px rgba(23,26,33,.1)}
.gate .pill{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);color:var(--accent2);font-weight:700;font-size:12px;letter-spacing:.04em;padding:7px 13px;border-radius:20px}
.gate .pill img{height:15px}
.gate h1{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:18px 0 8px}
.gate h1 span{color:var(--accent)}
.gate p{color:var(--muted);margin-bottom:20px}
.gate label{display:block;font-weight:600;font-size:13px;margin:0 0 6px}
.gate input,.gate select{width:100%;border:1px solid #d7dae2;border-radius:11px;padding:13px 14px;font-size:15px;margin-bottom:16px;font-family:inherit;background:#fff}
.gate input:focus,.gate select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.gate .btn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:12px;padding:15px;font-weight:700;font-size:15px}
.gate .btn:hover{background:var(--accent2)}
.gate .foot{text-align:center;color:#9aa0ad;font-size:12.5px;margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.err{color:var(--red);font-size:13px;margin-top:8px;min-height:18px}
/* ---------- shell ---------- */
#app{display:none}
.shell{display:flex;min-height:100vh}
.side{width:218px;flex:none;background:var(--card);border-right:1px solid var(--line);padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.side .logo{display:flex;align-items:center;gap:10px;padding:4px 10px 16px;border-bottom:1px solid var(--line);margin-bottom:12px}
.side .logo img{height:24px}
.side .logo b{font-size:15px;letter-spacing:-.01em}
.side a.nav{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:#3f4450;font-weight:600;font-size:13.5px}
.side a.nav:hover{background:var(--soft)}
.side a.nav.on{background:var(--accent-soft);color:var(--accent2)}
.side .navsec{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#9aa0ad;font-weight:700;padding:14px 12px 4px}
.side .me{margin-top:auto;border-top:1px solid var(--line);padding:12px 10px 4px;display:flex;align-items:center;gap:9px}
.side .me .dot{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:none}
.side .me .nm{font-weight:700;font-size:13px}
.side .me .rl{font-size:11px;color:var(--muted)}
.side .me button{margin-left:auto;background:none;border:none;color:#9aa0ad;font-size:12px}
.main{flex:1;min-width:0;padding:22px 26px;max-width:1500px}
/* blur push-up on every page switch */
@keyframes pageIn{from{opacity:0;transform:translateY(16px);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
.main.anim{animation:pageIn .32s cubic-bezier(.22,.9,.3,1)}
.side .me{cursor:pointer;border-radius:10px}
.side .me:hover{background:var(--soft)}
.ph{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;padding-right:64px}   /* keep header buttons clear of the notification bell */
.ph h2{font-size:22px;font-weight:800;letter-spacing:-.02em}
.ph .sub{color:var(--muted);font-size:13px}
.grow{flex:1}
/* ---------- primitives ---------- */
.btn{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:10px 15px;font-weight:700;font-size:13.5px}
.btn:hover{background:var(--accent2)}
.btn.dark{background:var(--dark)}.btn.dark:hover{background:#0b0f18}
.btn.grn{background:var(--green)}.btn.red{background:var(--red)}
.btn2{border:1px solid #d7dae2;background:var(--card);color:var(--ink);border-radius:9px;padding:9px 13px;font-weight:600;font-size:13px}
.btn2:hover{background:var(--soft)}
.btn2.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
/* overflow-x:auto (not hidden) so a table wider than its panel scrolls instead of getting silently
   clipped - the panel's own width never grows, only its content becomes reachable by scroll. */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow-x:auto;overflow-y:hidden}
.grid{display:grid;gap:14px}
.g6{grid-template-columns:repeat(6,1fr)}.g5{grid-template-columns:repeat(5,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.stat .l{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.stat .n{font-size:25px;font-weight:800;margin-top:6px;letter-spacing:-.02em}
.stat .n small{font-size:13px;color:var(--muted);font-weight:600}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line);font-weight:700;background:var(--soft);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
tr.row{cursor:pointer}tr.row:hover{background:var(--soft)}
tr:last-child td{border-bottom:none}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:#eef0f4;color:#4b5563;white-space:nowrap}
.pill.won,.pill.ok{background:var(--green-soft);color:#15803d}
.pill.lost,.pill.bad{background:var(--red-soft);color:#b91c1c}
.pill.hot{background:var(--accent-soft);color:var(--accent2)}
.pill.warn{background:var(--amber-soft);color:#92400e}
.muted{color:var(--muted)}
.dot{color:#9aa0ad}
input,select,textarea{font-family:inherit}
.field{margin-bottom:13px}
.field label{display:block;font-size:11px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;letter-spacing:.04em;font-weight:600}
.field select,.field input,.field textarea{width:100%;border:1px solid #d7dae2;border-radius:10px;padding:10px 11px;font-size:13.5px;background:#fff}
.field select:focus,.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.sec{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:20px 0 10px;border-top:1px solid var(--line);padding-top:16px;font-weight:700}
.searchbar{border:1px solid #d7dae2;background:var(--card);border-radius:10px;padding:10px 12px;font-size:13.5px;min-width:220px}
select.ctrl{border:1px solid #d7dae2;background:var(--card);border-radius:10px;padding:10px 12px;font-size:13.5px}
.seg{display:flex;background:var(--card);border:1px solid #d7dae2;border-radius:10px;overflow:hidden}
.seg button,.seg a{background:transparent;border:none;padding:9px 15px;font-weight:600;font-size:13px;color:var(--muted)}
.seg button.on,.seg a.on{background:var(--accent);color:#fff}
/* ---------- SLA queue ---------- */
.sla{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.sla:last-child{border-bottom:none}
.sla .t{font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;width:64px;flex:none;text-align:center;border-radius:9px;padding:7px 0}
.sla.ok .t{background:var(--green-soft);color:#15803d}
.sla.warn .t{background:var(--amber-soft);color:#92400e}
.sla.bad .t{background:var(--red-soft);color:#b91c1c;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.55}}
.sla .who .nm{font-weight:700}.sla .who .mt{font-size:12px;color:var(--muted)}
/* ---------- kanban ---------- */
.kb{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px}
.col{min-width:240px;width:240px;flex:none;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:12px}
.col h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:11px;display:flex;justify-content:space-between;font-weight:700}
.col h4 span{color:#aeb4c0}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:10px;cursor:grab;box-shadow:0 1px 2px rgba(23,26,33,.04)}
.kcard:hover{border-color:var(--accent)}
.kcard .nm{font-weight:700}.kcard .meta{font-size:12px;color:var(--muted);margin-top:4px}
/* What they closed for. Its own line, in money-green, so a manager scanning the board reads the
   amount at a glance instead of hunting for it inside the grey source line. */
.kcard .kpaid{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;
  background:#dcfce7;color:#166534;font-weight:800;font-size:12.5px;letter-spacing:.01em}
/* Which webinar. Amber so it reads as provenance, distinct from the green money badge. */
.kcard .kweb{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;
  background:#fef3c7;color:#92400e;font-weight:700;font-size:11.5px}
.col.drag{outline:2px dashed var(--accent);outline-offset:-4px}
/* ---------- feed ---------- */
.ev{border-left:2px solid var(--line);padding:0 0 13px 13px;position:relative}
.ev::before{content:'';position:absolute;left:-5px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.ev .ty{font-weight:600;font-size:13px}.ev .mt{font-size:12px;color:var(--muted);margin-top:2px}
/* ---------- call panel ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(17,20,28,.45);z-index:40;display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.on{display:flex}
.modal{background:var(--card);border-radius:18px;max-width:520px;width:100%;max-height:92vh;overflow-y:auto;padding:22px}
.modal h3{font-size:18px;font-weight:800;margin-bottom:4px}
.timer{font-size:44px;font-weight:800;font-variant-numeric:tabular-nums;text-align:center;letter-spacing:-.02em;margin:14px 0}
.timer.live{color:var(--green)}
.outs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.outs button{border:1px solid #d7dae2;background:#fff;border-radius:10px;padding:11px;font-weight:600;font-size:13px}
.outs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.drop{border:2px dashed #c9cdd8;border-radius:12px;padding:18px;text-align:center;color:var(--muted);font-size:13px;margin:10px 0;cursor:pointer}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
/* Who owns this lead, stated before a call starts. Three states because they need three different
   reactions: free (take it), yours (go), someone else's (do not double-call). */
.ownbar{display:flex;align-items:center;gap:12px;border-radius:11px;padding:10px 13px;margin:12px 0 4px;font-size:13.5px}
.ownbar > div{flex:1;min-width:0}
.ownbar.mine{background:var(--green-soft);border:1px solid #86efac}
.ownbar.free{background:var(--amber-soft);border:1px solid #fcd34d}
.ownbar.taken{background:var(--red-soft);border:1px solid #fca5a5}
.ownbar button{flex:none}
.scopehint{font-size:12px;color:var(--muted);margin:-6px 0 10px}
/* ---------- drawer ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,94vw);background:var(--card);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .2s;z-index:30;overflow-y:auto;box-shadow:-24px 0 60px rgba(23,26,33,.15)}
.drawer.on{transform:none}
.drawerbg{display:none;position:fixed;inset:0;background:rgba(17,20,28,.4);z-index:29}
.drawerbg.on{display:block}
/* in-page viewer for protected files - a popup cannot survive mobile Safari's blocker */
.lightbox{display:none;position:fixed;inset:0;z-index:80;background:rgba(17,20,28,.82);
  align-items:center;justify-content:center;padding:24px}
.lightbox.on{display:flex}
.lightbox .lb-body{max-width:min(900px,94vw);max-height:88vh;overflow:auto;background:var(--card);border-radius:14px}
.lightbox img{display:block;max-width:100%;max-height:88vh;border-radius:14px}
.lightbox .lb-x{position:absolute;top:14px;right:16px;width:44px;height:44px;border-radius:50%;
  border:none;background:rgba(255,255,255,.9);font-size:26px;line-height:1;color:#111827}
.dh{padding:20px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2}
.dh .x{float:right;background:none;border:none;color:var(--muted);font-size:24px;cursor:pointer}
.db{padding:20px 22px}
.save{width:100%;background:var(--accent);color:#fff;border:none;border-radius:11px;padding:13px;font-weight:700;font-size:14px}
.save:hover{background:var(--accent2)}
.save.alt{background:var(--dark)}.save.alt:hover{background:#0b0f18}
.mnote{font-size:12.5px;margin-top:9px;min-height:16px}
audio{width:100%;height:34px;margin-top:6px}
/* ---------- calendar (month grid) ---------- */
.calm-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.calm-dows div{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:0 4px}
.calm{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calm .dcell{background:var(--card);border:1px solid var(--line);border-radius:11px;min-height:96px;padding:7px 8px;cursor:pointer;transition:border-color .12s}
.calm .dcell:hover{border-color:var(--accent)}
.calm .dcell.other{opacity:.42}
.calm .dcell.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.calm .dcell h5{font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:700}
.calm .dcell.today h5{color:var(--accent2)}
/* white-space:nowrap + overflow:hidden so this cell's longest word cannot set a min-content floor
   for its grid track - "+2 więcej" was widening all 7 month columns past the viewport */
.cmore{font-size:11px;color:var(--muted);font-weight:600;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calm .dcell{min-width:0}
.cev{border-radius:7px;padding:3px 7px;font-size:11px;font-weight:600;margin-bottom:4px;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}
.dayev{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:8px}
.cdot{width:10px;height:10px;border-radius:50%;flex:none}
/* score + transcript */
.scorepill{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px}
.s-hi{background:var(--green-soft);color:#15803d}.s-mid{background:var(--amber-soft);color:#92400e}.s-lo{background:var(--red-soft);color:#b91c1c}
details.tr{margin-top:6px}
details.tr summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--accent2)}
details.tr pre{white-space:pre-wrap;font-family:inherit;font-size:12.5px;line-height:1.55;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:6px;max-height:260px;overflow-y:auto}
.aitip{font-size:12.5px;background:var(--accent-soft);color:var(--accent2);border-radius:9px;padding:6px 10px;margin-top:5px;font-weight:600}
/* per-lead chat */
.chat{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px;max-height:280px;overflow-y:auto}
.msg{max-width:86%;border-radius:12px;padding:8px 11px;margin-bottom:8px;font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.msg.mout{background:var(--accent);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.msg.min{background:#fff;border:1px solid var(--line);margin-right:auto;border-bottom-left-radius:4px}
.msg .mmeta{font-size:10.5px;opacity:.75;margin-top:4px}
.msg.mout .mmeta{color:#e3e1ff}.msg.min .mmeta{color:var(--muted)}
/* offer rundown chips */
.rundown{margin:8px 0 10px}
.rdl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:6px}
.rdchips{display:flex;gap:6px;flex-wrap:wrap}
.rdchip{border:1px solid #d7dae2;background:#fff;border-radius:9px;padding:7px 11px;font-weight:700;font-size:12px;cursor:pointer;line-height:1.2;text-align:left}
.rdchip small{display:block;font-weight:600;color:var(--muted);font-size:10.5px}
.rdchip:hover{border-color:var(--accent);color:var(--accent2)}
/* journey path badges */
.jbadge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent2)}
.jbadge.ok{background:var(--green-soft);color:#15803d}
.jarrow{color:#c3c7d1;margin:0 4px;font-size:11px}
/* deep journey timeline (lead page): one block per visit */
.jgroup{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fbfcfe}
.jgh{font-size:12px;color:#5b6472;padding-bottom:8px;border-bottom:1px dashed var(--line);margin-bottom:6px}
.jev{display:flex;align-items:baseline;gap:6px;font-size:12.5px;padding:3px 0;line-height:1.45}
.jev .jt{margin-left:auto;color:#9aa1ad;font-size:11px;white-space:nowrap;padding-left:10px}
.jgap{text-align:center;color:#9aa1ad;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:8px 0}
/* which webinar a lead signed up for, on the card itself */
.webbadge{margin-top:6px;font-size:11px;color:#6b5a1f;background:#fdf6e3;border:1px solid #efe0b0;
  border-radius:7px;padding:3px 7px;display:inline-flex;align-items:center;gap:5px;line-height:1.35}
.webbadge b{color:#4a3d12}
/* One tab per webinar week. Dropped the joined-segment look: as a .seg the weeks ran together into
   one grey bar and you could not tell at a glance which week you were reading. Separate cards with
   their own border read as distinct choices, and the selected one is filled, not just tinted.
   Also drops the parent's overflow:hidden + border-radius combination, which clipped scrolled tabs
   against the rounded corner. */
.seg.webtabs{margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:transparent;border:none;border-radius:0;gap:8px;padding-bottom:4px}
.seg.webtabs button{white-space:nowrap;flex:none;border:1px solid #d7dae2;background:var(--card);
  border-radius:11px;padding:9px 14px;line-height:1.3;text-align:left;transition:border-color .12s,box-shadow .12s}
.seg.webtabs button:hover{border-color:var(--accent)}
.seg.webtabs button.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(79,70,229,.28)}
.seg.webtabs button .muted{display:block;font-size:11.5px;font-weight:600;margin-top:2px}
.seg.webtabs button.on .muted{color:rgba(255,255,255,.82)}
/* ---------- funnels / drop-off ----------
   The bar length is "how many reached this step", so the taper of the column IS the drop-off and
   you read the leak without doing arithmetic. */
.fstep{display:grid;grid-template-columns:150px 1fr 54px 92px 56px;align-items:center;gap:10px;
  padding:7px 6px;border-radius:8px;font-size:13px}
.fstep.fhead{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding-bottom:2px}
.fstep.worst{background:var(--red-soft)}
.fs-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.fs-bar{background:var(--soft);border-radius:6px;height:16px;overflow:hidden}
.fs-bar span{display:block;height:100%;background:var(--accent);border-radius:6px}
.fs-n{font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
.fs-d{font-variant-numeric:tabular-nums;color:var(--muted);text-align:right;font-size:12px}
.fs-d.bad{color:var(--red);font-weight:700}
.fs-t{color:#9aa1ad;text-align:right;font-size:11.5px;font-variant-numeric:tabular-nums}
.fworst{background:var(--amber-soft);color:#92400e;padding:9px 16px;font-size:13px;border-bottom:1px solid var(--line)}
@media(max-width:640px){
  /* the median column is the first thing worth losing on a phone; the label and the leak are not */
  .fstep{grid-template-columns:1fr 46px 78px;gap:8px}
  .fs-bar,.fs-t{display:none}
}
/* ---------- playbook ---------- */
.pbtabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.pb pre{white-space:pre-wrap;font-family:inherit;font-size:14px;line-height:1.65;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px}
.obj{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:9px}
.obj .q{font-weight:700}.obj .a{color:#3f4450;margin-top:5px;font-size:13.5px}
.obj .by{font-size:11px;color:#9aa0ad;margin-top:5px}
/* ---------- bars ---------- */
.bar{height:9px;border-radius:6px;background:var(--accent);min-width:3px}
.barrow{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13px}
.barrow .k{width:170px;flex:none;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barrow .v{color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
.avatar{width:26px;height:26px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;vertical-align:middle;margin-right:7px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;border-radius:11px;padding:11px 18px;font-weight:600;font-size:13.5px;z-index:60;display:none}
/* profile */
/* padding-right matches .ph: the notification bell is position:fixed at right:20px with z-index:60,
   and .phero is the ONE page header that never reserved room for it, so the PL/EN switcher (the last
   child, right-aligned) sat underneath it and could not be clicked. */
.phero{display:flex;align-items:center;gap:16px;margin-bottom:18px;padding-right:64px}
.phero .big{width:56px;height:56px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;flex:none}
.phero h2{font-size:24px;font-weight:800;letter-spacing:-.02em}
.phero .rl{color:var(--muted);font-size:13px;margin-top:2px}
.missrec{border:1px solid #fecaca;background:#fff7f7;border-radius:12px;padding:11px 14px;margin-bottom:9px;display:flex;align-items:center;gap:10px}
.missrec .grow b{font-size:13.5px}
.missrec .mt{font-size:12px;color:var(--muted)}
/* collapsible section header (Numbers page) */
.cph{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;flex-wrap:wrap}
.cph:hover{background:var(--soft)}
.cph .cpc{color:var(--muted);font-size:12px;width:12px;flex:none}
.langseg{display:flex;gap:6px;justify-content:flex-end;margin-bottom:10px}
.langseg button{border:1px solid #d7dae2;background:#fff;border-radius:8px;padding:5px 10px;font-weight:700;font-size:11.5px;color:var(--muted)}
.langseg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:960px){.side{width:64px}.side .logo b,.side a.nav .lb,.side .navsec,.side .me .nm,.side .me .rl{display:none}
  /* minmax(0,1fr), not plain 1fr: a grid track's default min-width is auto (its content's natural
     width), so a long label like "SLA PRZEKROCZONE" was still forcing the row wider than the
     viewport even after cutting it to 3/2/1 columns. minmax(0,1fr) lets the track actually shrink. */
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}.g5,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3,.g2{grid-template-columns:minmax(0,1fr)}.main{padding:14px}
  /* Same story everywhere else in the app: a dozen pages (lead detail, dial list, numbers, ops
     health, revenue...) split into a fixed two-column layout via an inline grid-template-columns
     on a bare .grid div, which none of the .gN rules above ever touch. Catching every one of them
     by the one thing they share - the inline style itself - beats hand-classing each page. The
     attribute match excludes the .g2/.g6 etc tiles above: those never carry an inline
     grid-template-columns, only the class does. */
  /* minmax(0,1fr), not 1fr - exactly the same trap the .g6 rule above documents. A plain 1fr is
     minmax(auto,1fr), so the track's floor is its content's min-content width and a wide child
     (the lead page's contact strip) pushed the column past the viewport anyway: measured 402px of
     card inside a 375px screen, 40px of sideways scroll on the page a rep uses most. */
  .grid[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .grid[style*="grid-template-columns"] > *{min-width:0}
  .card,.panel{min-width:0}
  /* same track-min-width issue on the cash strip: 1fr 1fr 1.3fr with a 40px number and no minmax
     was still wider than the phone screen even though it's only 3 short columns. */
  .ownerhero{grid-template-columns:1fr!important;gap:14px!important;padding:20px!important}
  .ownerhero .oh-col{border-left:none!important;padding:0!important}
  .ownerhero .oh-col.hero .oh-n{font-size:32px}}

.navtoggle{display:none;position:fixed;top:14px;left:14px;z-index:50;width:40px;height:40px;
  border-radius:10px;background:var(--card);border:1px solid var(--line);align-items:center;justify-content:center;color:#3f4450}
.navbackdrop{display:none;position:fixed;inset:0;background:rgba(17,20,28,.45);z-index:39}
/* below 640px the 64px icon-rail from the 960px rule above isn't enough - it still eats 17% of a
   375px screen and nobody can read the icons. Turn it into a full slide-in drawer instead: fixed,
   off-canvas by default, full width+labels restored, opened by the hamburger / a backdrop tap. */
@media(max-width:640px){
  .navtoggle{display:flex}
  .navbackdrop.on{display:block}
  .side{position:fixed;top:0;left:0;bottom:0;width:240px;z-index:41;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:2px 0 24px rgba(17,20,28,.18)}
  .side.open{transform:none}
  .side .logo b,.side a.nav .lb,.side .navsec,.side .me .nm,.side .me .rl{display:revert!important}
  .ph{padding-left:48px}
  /* 16px, not 13.5px: iOS Safari auto-zooms the whole page on focus of any input under 16px, and
     never zooms back out - every tap into a form was quietly breaking the layout until the page
     was manually pinched back. 44px is Apple/Google's own minimum comfortable tap target. */
  .field select,.field input,.field textarea,.searchbar,select.ctrl{font-size:16px;padding:11px 12px;min-height:44px}
  .field textarea{min-height:88px}
  .btn,.btn2{min-height:44px;padding:11px 16px}
  .row2,.row3{grid-template-columns:1fr}
  .modal{padding:18px;border-radius:14px}
  .drawer{width:100vw}

  /* ---- phone chrome (v10) ----
     The bell and the hamburger are both position:fixed, and .ph was paying for both out of its own
     width: padding-right:64px + padding-left:48px reserved 112px of a 375px screen, so every page
     header wrapped into 4-6 rows before any content. The lead page measured 419px of header on a
     667px screen. Shrink both controls, sit them in the same 40px band, and give .ph back the width. */
  .navtoggle{width:36px;height:36px;top:10px;left:10px}
  #nfwrap{top:10px;right:12px}
  #nfbell{width:36px;height:36px;font-size:16px}
  .ph{padding-left:42px;padding-right:46px;gap:6px;margin-bottom:12px;min-height:40px}
  .phero{padding-right:46px}                     /* same bell clearance as .ph at the shrunk phone size */
  .ph h2{font-size:18px;width:100%}              /* title owns its line, controls get a clean row */
  .ph .sub{width:100%;order:99;font-size:12px}   /* subtitle drops below instead of splitting the control row */
  /* .grow is a flex:1 spacer for the desktop right-align. In a wrapping container it swallows the
     rest of the row and force-breaks every control after it - the calendar header was 7 rows tall. */
  .ph .grow{display:none}
  .ph .btn,.ph .btn2{padding:11px 12px}          /* still a 44px tap target, just narrower */
  /* The lead page carries up to nine controls (call, zoom, pay, WON, telegram, past call, edit,
     delete, back) and they were stacking into ~5 rows, 41% of the screen gone before any content.
     Two tiers: the money actions stay full size, the rest shrink to a secondary strip. */
  .ph .btn2{font-size:12.5px;padding:9px 10px;min-height:38px}
  .ph .btn{font-size:13.5px}
  .ph .calviews,.ph .seg{max-width:100%}
  /* a searchbar that cannot shrink forces the whole header wider than the screen; inside a page
     header let it SHARE a row with the filter next to it instead of owning one */
  .searchbar{min-width:0;width:100%}
  .ph .searchbar{flex:1 1 120px;width:auto}
  /* both must be allowed to grow, or the searchbar's flex-grow consumes the whole line and the
     filter next to it wraps onto a row of its own */
  .ph select.ctrl{flex:1 1 100px;min-width:0;max-width:100%}
  select.ctrl{max-width:100%}
  /* two segmented controls side by side were 290px against 287px of usable width - a 3px miss that
     cost a whole row each */
  .ph .seg button,.ph .seg a{padding:9px 10px;font-size:12px}
  /* tab strips clip with overflow:hidden, so a clipped tab is unreachable - let them scroll */
  .seg{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .seg button,.seg a{white-space:nowrap;flex:none}

  /* Telegram tab: 250px rail + chat in a 347px container left the conversation 97px wide, about two
     characters per line. On a phone it becomes one column - rail OR chat, never both. */
  .tg-wrap{flex-direction:column;height:auto;min-height:0}
  .tg-rail{width:100%;max-height:38vh;border-right:none;border-bottom:1px solid var(--line)}
  .tg-chat{min-height:56vh}
  .tg-bub{max-width:88%}
  .tg-compose input{font-size:16px;min-height:44px}
  /* collapse the rail once a topic is open so the thread gets the whole screen */
  .tg-wrap.threadopen .tg-rail{display:none}

  /* the drawer is full-screen here, and its only exit was a 15x28px glyph */
  .dh .x{font-size:30px;line-height:1;padding:6px 10px;margin:-6px -6px 0 0;min-width:44px;min-height:44px}
  .dh{padding:16px 16px 14px}
  .db{padding:16px}

  /* 170px of fixed label inside a ~309px card pushed the whole page sideways */
  .barrow{flex-wrap:wrap}
  .barrow .k{width:100%}
  /* pl-PL groups thousands with a non-breaking space, so "125 000 zł" is one unbreakable token
     that overflowed a 25px stat and took the page with it */
  .stat .n{font-size:20px;overflow-wrap:anywhere}
  /* The SLA queue row was display:flex with NO wrap: a 64px fixed timer plus up to three 44px
     buttons in ~319px, so Reply / Take / Call sat off the right edge of the panel - on the one
     queue whose entire purpose is speed to lead. Let it wrap and give the actions their own row. */
  .sla{flex-wrap:wrap;align-items:flex-start;gap:10px;padding:12px 14px}
  .sla .t{width:auto;min-width:56px;padding:6px 10px}
  .sla .who{flex:1 1 55%;min-width:0}
  .sla .btn,.sla .btn2{flex:1 1 calc(50% - 5px);justify-content:center}

  /* Dial list: 8 columns of table that only reached the closer by sideways swipe, while the row's
     own onclick fought the scroll gesture. On a phone it becomes a stack of cards. */
  .dialcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
  .dialcard .dc-top{display:flex;align-items:center;gap:9px;margin-bottom:6px}
  .dialcard .dc-nm{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dialcard .dc-meta{font-size:12.5px;color:var(--muted);line-height:1.5}
  .dialcard .dc-acts{display:flex;gap:8px;margin-top:10px}
  .dialcard .dc-acts .btn,.dialcard .dc-acts .btn2{flex:1;justify-content:center}

  .outs button{min-height:44px}
  .calviews button{min-height:44px}
  .save{min-height:44px}
  .rdchip{min-height:44px}

  /* iOS Safari zooms the whole page on focus of any input under 16px and never zooms back out. The
     earlier pass fixed .field inputs, but these carry an INLINE font-size, which no ordinary rule
     can override - only !important outranks an inline style. These are the message composers, i.e.
     the controls a rep touches most. */
  #m_body,#pm_body,#pm_ch,#ai_q,#tg_txt,#recq,#tl_slug,#tl_page,#tl_src{font-size:16px!important;min-height:44px}

  /* one-tap stage change on the board (drag is mouse-only) */
  .kcard .kstage{display:block;width:100%;margin-top:9px;font-size:16px;min-height:40px;border:1px solid #d7dae2;
    border-radius:9px;padding:8px 10px;background:var(--soft);font-weight:600;color:#3f4450}
}
/* Below 640px the tour always renders as a centred modal, but 641-900px (phone landscape) uses the
   anchored branch, which clamps horizontally and never vertically - Skip/Back/Next could land off
   the bottom of a position:fixed box with no Escape key to escape it. */
@media(max-height:520px){
  .tourbox{max-height:calc(100vh - 24px);overflow-y:auto}
}
/* automated-message markers: reps see instantly what the system already sent */
.jauto{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:6px;background:#fef3c7;color:#92400e;vertical-align:1px}
.msg.mauto{background:#eef0fb;color:#3b3f8f;border:1px dashed #b9bfec}
.msg.mauto .mmeta{color:#7d82b8}
.jdesc{font-size:11.5px;color:#8a6d1f;background:#fdf6e3;border-radius:8px;padding:5px 9px;margin:3px 0 2px 22px}
/* Telegram tab: real chat layout - topic rail left, conversation right */
.tg-wrap{display:flex;gap:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;height:calc(100vh - 150px);min-height:420px}
.tg-rail{width:250px;flex:none;border-right:1px solid var(--line);overflow-y:auto;background:var(--soft)}
.tg-item{display:flex;align-items:center;gap:10px;padding:11px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.tg-item:hover{background:#eceef6}
.tg-item.on{background:var(--accent);color:#fff}
.tg-item.on small{color:rgba(255,255,255,.75)}
.tg-ico{width:30px;height:30px;border-radius:50%;background:#dfe3ef;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.tg-item.on .tg-ico{background:rgba(255,255,255,.22)}
.tg-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.tg-meta b{font-size:13.5px}
.tg-meta small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-n{font-size:11px;color:#9aa1ad;font-weight:700}
.tg-item.on .tg-n{color:rgba(255,255,255,.8)}
.tg-dot{background:var(--red);color:#fff;font-size:11px;font-weight:800;border-radius:10px;padding:2px 7px}
.tg-chat{flex:1;min-width:0;display:flex;flex-direction:column;background:#e7ebf3}
.tg-head{padding:11px 16px;background:var(--card);border-bottom:1px solid var(--line);font-size:14px}
.tg-feed{flex:1;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:3px}
.tg-row{display:flex;align-items:flex-end;gap:8px}
.tg-row.mine{justify-content:flex-end}
.tg-av{width:30px;height:30px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:none}
.tg-av.sp{background:transparent}
.tg-bub{background:#fff;border-radius:14px 14px 14px 4px;padding:7px 12px 8px;max-width:70%;font-size:13.5px;line-height:1.5;position:relative;box-shadow:0 1px 1px rgba(23,26,33,.06);margin-bottom:3px}
.tg-bub.mine{background:#d9e6ff;border-radius:14px 14px 4px 14px}
.tg-bub.help{background:#fee2e2;border:1px solid #fca5a5}
.tg-who{font-size:12px;font-weight:800;margin-bottom:2px}
.tg-t{font-size:10.5px;color:#9aa1ad;margin-left:10px;float:right;position:relative;top:6px}
.tg-compose{display:flex;gap:8px;padding:10px 12px;background:var(--card);border-top:1px solid var(--line)}
.tg-compose input{flex:1;border:1px solid #d7dae2;border-radius:20px;padding:10px 16px;font-size:13.5px}
.tg-compose input:focus{outline:none;border-color:var(--accent)}
/* notification bell: top right of every page */
#nfwrap{position:fixed;top:14px;right:20px;z-index:60}
#nfbell{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:18px;cursor:pointer;box-shadow:0 4px 14px rgba(23,26,33,.08)}
#nfbell:hover{background:var(--soft)}
#nfcount{display:none;position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;border-radius:10px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;align-items:center;justify-content:center;padding:0 4px}
#nfpanel{display:none;position:absolute;top:50px;right:0;width:440px;max-width:92vw;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 70px rgba(23,26,33,.18);overflow:hidden}
#nfpanel.on{display:block}
.nf-head{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px}
.nf-chips{display:flex;gap:5px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--soft)}
.nf-chip{border:1px solid #d7dae2;background:var(--card);border-radius:14px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer}
.nf-chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.nf-list{max-height:56vh;overflow-y:auto}
.nf-row{padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;line-height:1.45}
.nf-row small{color:#9aa1ad;font-size:11px}
.nf-row.click{cursor:pointer}
.nf-row.click:hover{background:var(--soft)}
.nf-row.help{background:#fef2f2}
/* generic centered modal (deal form) */
.mo2{position:fixed;inset:0;z-index:70;background:rgba(23,26,33,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px}
.mo2-box{background:var(--card);border-radius:18px;padding:22px;width:min(94vw,520px);max-height:92vh;overflow-y:auto;box-shadow:0 40px 90px rgba(23,26,33,.3)}
.mo2-box h3{margin-bottom:14px;font-size:17px}
/* delete buttons: quiet until hovered */
.delb{border:none;background:transparent;font-size:13px;opacity:.35;cursor:pointer;padding:2px 4px;border-radius:6px}
.delb:hover{opacity:1;background:var(--red-soft)}
.tg-bub .tgdel{position:absolute;top:4px;right:6px;display:none}
.tg-bub:hover .tgdel{display:block}
/* in-CRM call recorder */
.recbox{display:flex;align-items:center;gap:9px;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:13px;font-weight:600}
.recdot{width:11px;height:11px;border-radius:50%;flex:none}
.recdot.off{background:#c3c7d1}
.recdot.on{background:var(--red);animation:pulse 1.1s infinite}
.recdot.err{background:var(--red)}
.recdev{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:12.5px}
.recdev label{color:var(--muted);font-weight:600;white-space:nowrap}
.recdev select{flex:1;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12.5px;background:#fff}
.recrow{display:flex;align-items:center;gap:8px;margin-top:8px}
/* audio confirmation popup - the rep presses play and says whether they can hear the call */
.aud-meta{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.aud-warn,.aud-ok,.aud-pending{border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600;line-height:1.45}
.aud-warn{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b}
.aud-ok{background:#dcfce7;border:1px solid #86efac;color:#166534}
.aud-pending{background:var(--soft);border:1px solid var(--line);color:var(--muted)}
.aud-actions{display:flex;gap:10px}
.aud-actions .btn{flex:1}
/* the phone breakpoint stacks them - two 44px targets side by side get too narrow to hit safely */
@media(max-width:640px){.aud-actions{flex-direction:column}}
.aud-flag{display:inline-block;background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;margin-left:6px}
.aud-flag.wait{background:#fef9c3;color:#854d0e;border-color:#fde047}
/* message screenshots on a lead */
.shots{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.shot{width:104px}
.shot img{width:104px;height:104px;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block}
.shot-doc{display:flex;width:104px;height:104px;align-items:center;justify-content:center;background:var(--soft);border:1px solid var(--line);border-radius:9px;font-weight:800;color:var(--muted)}
.shot-m{font-size:10px;color:#9aa1ad;margin-top:3px;line-height:1.3}

/* ===== Week and day views: a real time grid, like a calendar app rather than a list =====
   One hour = one row. Events are absolutely positioned inside their day column so a 09:15-10:00
   call sits where it belongs instead of being alphabetised into a stack. */
.calw{display:grid;grid-template-columns:56px 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.calw .hours{border-right:1px solid var(--line)}
.calw .hours div{height:52px;font-size:11px;color:var(--muted);text-align:right;padding:2px 8px 0 0;box-sizing:border-box}
.calw .cols{display:grid;position:relative}
.calw .col{position:relative;border-left:1px solid var(--line)}
.calw .col:first-child{border-left:none}
.calw .col .slot{height:52px;border-top:1px solid var(--line);box-sizing:border-box}
.calw .col .slot:first-child{border-top:none}
.calw .colhead{position:sticky;top:0;z-index:2;background:var(--bg);border-bottom:1px solid var(--line);
  padding:8px 6px;text-align:center;font-size:12px;font-weight:700}
.calw .colhead small{display:block;font-weight:600;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.calw .colhead.today{color:var(--accent)}
.calw-head{display:grid;grid-template-columns:56px 1fr;margin-bottom:0}
.tev{position:absolute;left:4px;right:4px;border-radius:8px;padding:5px 8px;color:#fff;font-size:11.5px;
  line-height:1.3;overflow:hidden;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.tev b{display:block;font-size:11px;opacity:.9;font-weight:700}
.tev.mine{outline:2px solid rgba(255,255,255,.55);outline-offset:-2px}
.nowline{position:absolute;left:0;right:0;height:2px;background:var(--red);z-index:3;pointer-events:none}
.nowline:before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.calviews{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.calviews button{border:none;background:var(--card);padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
.calviews button.on{background:var(--accent);color:#fff}

/* pipeline columns: the two dead ends read differently from the live ones */
.kb .col.colwon{border-color:rgba(22,163,74,.5);background:linear-gradient(180deg,rgba(22,163,74,.07),transparent)}
.kb .col.coldead{opacity:.72}
.kb .colhint{font-size:10.5px;color:var(--muted);margin:-4px 0 8px;line-height:1.35;min-height:26px}
.kcard{position:relative}
.avatar.sm{position:absolute;top:8px;right:8px;width:20px;height:20px;font-size:9px}

/* Calendar page: grid on the left, the day's work on the right, both visible without scrolling */
.planwrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:stretch}
.planside{display:flex;flex-direction:column;gap:12px}
.planside .panel{display:flex;flex-direction:column;margin-bottom:0;min-height:0}
.planside .panel > div:first-child{flex:none}
.planside .panel > div:last-child,.planside .panel table{overflow-y:auto;min-height:0}
.planside .panel table{display:block}
.plancal .calw{max-height:none}

/* Wide layout only. Tasks and My Calls used to be whatever height their contents wanted, so a long
   call list made one panel tower over the other and pushed the page down. Here they split the
   column evenly and scroll inside themselves; the webinar card keeps its own height because it is
   one fixed fact, not a list. Below the breakpoint the column stacks and an equal split would
   collapse both panels to nothing, so they go back to natural height. */
@media(min-width:1181px){
  .planside{height:100%}
  .planside .panel{flex:1 1 0}
  .planside .panel.fixed{flex:0 0 auto}
  .planside .panel > div:last-child,.planside .panel table{flex:1 1 auto}
}
@media(max-width:1180px){
  .planwrap{grid-template-columns:1fr}
  /* stacked, so cap each list instead - otherwise a long call list makes the page a mile long */
  .planside .panel > div:last-child,.planside .panel table{max-height:340px}
}

/* ===== Call briefing: what the closer reads in the ten seconds before dialling ===== */
.brief{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px}
.brief .bhead{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:10px}
.brief .bflag{font-size:12.5px;font-weight:600;border-radius:8px;padding:8px 11px;margin-bottom:12px}
.brief .bflag.ok{background:rgba(22,163,74,.10);color:#15803d;border:1px solid rgba(22,163,74,.28)}
.brief .bflag.bad{background:rgba(220,38,38,.09);color:#b91c1c;border:1px solid rgba(220,38,38,.3)}
.brief .bflag small{display:block;font-weight:500;opacity:.85;margin-top:3px}
.brief .bbig{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.brief .bbig > div{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.brief .bbig .l{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:3px}
.brief .bbig b{font-size:14.5px;line-height:1.25;display:block}
.brief .bgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.brief .brow{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.brief .brow span{color:var(--muted)}
.brief .brow b{text-align:right}
.brief .bstory{margin-top:14px;padding:12px 14px;background:var(--bg);border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0;font-size:13.5px;line-height:1.6;white-space:pre-wrap}
.brief .bstory .l{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:5px}
@media(max-width:900px){.brief .bbig,.brief .bgrid{grid-template-columns:1fr}}

/* ===== Guided tour: 4-piece veil around a spotlighted element, not one clip-path -=====
   a single overlay with a clip-path hole still eats every click across its whole box, hole
   included, so the spotlighted control would look clickable but not be. Four rectangles around
   the hole leave that rectangle with literally nothing painted over it. */
.tourpiece{position:fixed;background:rgba(10,10,20,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  z-index:9998;transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease;pointer-events:auto}
.tourring{position:fixed;z-index:9998;border-radius:10px;box-shadow:0 0 0 3px var(--accent),0 0 0 6px rgba(79,70,229,.28);
  pointer-events:none;transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease}
.tourbox{position:fixed;z-index:9999;width:320px;max-width:calc(100vw - 24px);background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.28);padding:16px 18px;
  transition:top .22s ease,left .22s ease}
.tourbox .tstep{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.tourbox .ttitle{font-size:15.5px;font-weight:800;margin-bottom:7px;line-height:1.3}
.tourbox .tbody{font-size:13.5px;line-height:1.55;color:var(--ink,inherit);opacity:.92;margin-bottom:14px}
.tourbox .tfoot{display:flex;align-items:center;gap:8px}
.tourbox .tfoot .grow{flex:1}
.tourbox .tskip{font-size:12.5px;color:var(--muted);background:none;border:none;cursor:pointer;padding:6px 4px}
.tourbox .tskip:hover{text-decoration:underline}
.tourbox .tbtn{border:none;border-radius:9px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer}
.tourbox .tnext{background:var(--accent);color:#fff}
.tourbox .tnext:hover{background:var(--accent2)}
.tourbox .tback{background:transparent;color:var(--muted);border:1px solid var(--line)}
.tourmodal-wrap{position:fixed;inset:0;z-index:9998;background:rgba(10,10,20,.6);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.tourmodal-wrap .tourbox{position:static;width:100%;max-width:380px}

/* ===== Owner dashboard: money gets the most visual weight on this page, on purpose - one hero
   card carries today/week/month instead of three identical stat tiles, so the number that matters
   most (month-to-date) reads first without being told to. ===== */
.ownerhero{background:linear-gradient(135deg,var(--dark) 0%,#1c2333 100%);border-radius:20px;padding:26px 30px;
  color:#fff;display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:0;align-items:center;margin-bottom:18px}
.ownerhero .oh-col{padding:0 22px;border-left:1px solid rgba(255,255,255,.14)}
.ownerhero .oh-col:first-child{border-left:none;padding-left:0}
.ownerhero .oh-l{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.55);font-weight:700;margin-bottom:8px}
.ownerhero .oh-n{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ownerhero .oh-col.hero .oh-n{font-size:40px}
.oh-trend{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;margin-left:10px;padding:2px 9px;border-radius:20px;vertical-align:middle}
.oh-trend.up{background:rgba(22,163,74,.22);color:#4ade80}
.oh-trend.down{background:rgba(220,38,38,.22);color:#f87171}
.oh-trend.flat{background:rgba(255,255,255,.12);color:rgba(255,255,255,.65)}
/* "Needs you": a deal that cannot resolve itself, waiting specifically on a yes/no from a manager -
   amber border says "this is a queue", not just another list. */
.needq{border-left:3px solid var(--amber);background:var(--amber-soft);border-radius:0 12px 12px 0;
  padding:13px 16px;margin-bottom:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.needq:last-child{margin-bottom:0}
.needq .nq-main{flex:1;min-width:180px}
.needq .nq-who{font-weight:700;font-size:14px}
.needq .nq-meta{font-size:12px;color:#92400e;margin-top:2px}
.needq .nq-amt{font-size:17px;font-weight:800;color:#92400e;white-space:nowrap}
.allclear{display:flex;align-items:center;gap:10px;padding:18px;color:#15803d;font-weight:600;font-size:14px}
.owner-scorebar{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.owner-scorebar:last-child{border-bottom:none}
.owner-scorebar .grow-track{flex:1;height:8px;background:var(--soft);border-radius:6px;overflow:hidden}
.owner-scorebar .grow-fill{height:100%;background:var(--accent);border-radius:6px}

/* Nav icons are inline SVG now (monoline, currentColor) instead of emoji - fixed box so every icon
   lines up regardless of its natural glyph width, and stroke color follows the link's own color
   (including the active/on state) with zero extra styling per-icon. */
.side a.nav .ic{width:18px;height:18px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.side a.nav .ic svg{width:100%;height:100%;display:block}
.signout-btn{display:flex;align-items:center;gap:7px;width:100%;justify-content:center;margin-top:8px;padding:9px 12px;
  border:1px solid #d7dae2;background:var(--card);color:var(--muted);border-radius:9px;font-weight:600;font-size:12.5px}
.signout-btn:hover{background:var(--red-soft);color:#b91c1c;border-color:#f3c6c6}
.signout-btn svg{width:15px;height:15px;flex:none}
.ac-item{padding:8px 10px;border-radius:8px;cursor:pointer}
.ac-item:hover{background:var(--soft,#f6f6f8)}
/* Page-title and panel-header icons, replacing what used to be emoji throughout the app */
.hic{display:inline-flex;width:20px;height:20px;vertical-align:-4px;margin-right:2px}
.hic svg{width:100%;height:100%;display:block}
.bic{display:inline-flex;width:15px;height:15px;vertical-align:-2px;margin-right:3px}
.bic svg{width:100%;height:100%;display:block}
#nfbell svg{width:19px;height:19px;display:block;margin:0 auto}

/* ---------- funnel editor + live preview ---------- */
.fe-body{padding:6px 16px 14px}
.fe-f{margin-bottom:12px}
.fe-f label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fe-badge{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  background:var(--soft);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 7px}
.fe-badge.on{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}
.fe-reset{margin-left:auto;background:none;border:none;color:var(--muted);font-size:12.5px;font-weight:600;
  text-transform:none;letter-spacing:0;cursor:pointer;text-decoration:underline}
.fe-reset:hover{color:var(--red)}
/* the preview stage: a real page rendered at a chosen width, centred on a neutral ground so the
   page's own background is never confused with the CRM's.
   Centred via margin:auto on the iframe, NOT justify-content:center on this flex row - centering an
   overflowing child with justify-content traps half the overflow behind a negative scroll offset
   that overflow:auto can never reach (confirmed live: scrollWidth came back smaller than the child's
   own width). margin:auto has no such trap - it resolves to 0 once there is no free space to split,
   so an oversized iframe just goes flush left and is fully reachable by scrolling right. */
/* Scale-to-fit (no scrolling the CRM to see the preview): the iframe still renders at the REAL
   viewport size (1280x800 / 390x844) so media queries behave identically, and a CSS transform
   shrinks the whole device to fit the stage. Page content scrolls INSIDE the frame, like a real
   screen. overflow:hidden because nothing should ever poke out of a fitted stage. */
.fun-stage{background:repeating-conic-gradient(#eceef3 0% 25%,#f6f7fb 0% 50%) 50%/18px 18px;
  border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;overflow:hidden;
  align-items:center;justify-content:center}
#fe_scalewrap{transform-origin:top left}
/* the phone is a phone: bezel, notch, rounded screen */
.fe-phone{background:#15161a;border-radius:46px;padding:14px;position:relative;
  box-shadow:0 18px 50px rgba(23,26,33,.35),inset 0 0 0 2px #2c2e34}
.fe-phone:before{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:128px;height:24px;background:#15161a;border-radius:0 0 16px 16px;z-index:2}
.fe-phone iframe{border-radius:34px !important}
/* No max-width here on purpose - the JS sets a real inline width per breakpoint (1280/820/390px) and
   that has to be the ACTUAL viewport the page renders at, not shrunk to fit the column. .fun-stage's
   own overflow:auto is what handles a stage narrower than the selected width, by scrolling.
   flex-shrink:0 for the same reason - .fun-stage is a flex row, and a flex item's default
   flex-shrink:1 silently squashes it to fit the container width even with no max-width in play. */
.fun-stage iframe{border:0;background:#fff;border-radius:10px;flex-shrink:0;
  box-shadow:0 12px 40px rgba(23,26,33,.18)}
/* inspector left, real page right - the inspector scrolls on its own so a long field list never
   pushes the preview (the thing you are actually checking your edit against) off screen */
.fesplit{display:grid;grid-template-columns:380px 1fr;gap:16px;align-items:start}
/* Vertical padding, not just padding-right (#213): this is an overflow:auto box, so it clips at its
   padding edge. With 0 padding the first and last cards sat flush against that edge and their 16px
   rounded corners were sliced flat - the panel read as broken rather than scrollable. The padding
   keeps a card's corners inside the visible area at both ends of the scroll.
   scrollbar-gutter:stable stops the whole column shifting sideways when the scrollbar appears. */
/* One height for both columns (#185d): the inspector was calc(100vh - 170px) while the preview was
   78vh + its own chrome, so the split ended ~86px out of line at the bottom on an 800px viewport.
   Both now derive from this, and the stage takes whatever is left under the preview bar. */
.fesplit{--fe-col-h:calc(100vh - 170px)}
/* overflow-x:hidden is load-bearing (#185b): per spec, overflow-x's initial `visible` computes to
   `auto` once the other axis is not visible, so declaring only overflow-y silently turned this
   fixed-width control column into a sideways scroller the moment any child exceeded it. Measured
   214px of horizontal scroll before this line. */
.fe-inspector{min-width:0;max-height:var(--fe-col-h);overflow-y:auto;overflow-x:hidden;
  padding:3px 6px 16px 3px;scrollbar-gutter:stable;font-size:13px;line-height:1.45}
/* .panel carries overflow-x:auto for wide data tables elsewhere in the app - inside the inspector
   that gives every collapsible group its own horizontal scrollbar. Both axes must be reset, not
   just x: .panel also sets overflow-y:hidden, and an overflow-x of `visible` against a non-visible
   y computes straight back to `auto` - the same spec rule that bit .fe-inspector above. */
.fe-inspector .panel{overflow:visible}
/* height, not max-height: .fe-preview is a flex column, and `flex:1` on the stage can only divide
   a definite height. With max-height alone the column stayed content-sized, the stage got whatever
   the (empty) content asked for, and the iframe's height:100% resolved against nothing - measured
   live at 150px instead of a full-height preview. */
.fe-preview{min-width:0;position:sticky;top:14px;height:var(--fe-col-h);
  display:flex;flex-direction:column}
/* renderFunPreview() writes the bar + stage into #fe_previewpane, so that wrapper - not
   .fe-preview - is the real parent of the stage. Without making it a flex column too, .fun-stage's
   flex:1 had no growing container to expand into and the stage stayed at content height. */
.fe-preview>#fe_previewpane{flex:1;min-height:0;display:flex;flex-direction:column}
.fe-preview .fun-stage{flex:1;min-height:0}
/* align-self:stretch, not height:100%. A percentage height on a replaced element needs a definite
   containing block; against the stage's flex-derived height it resolved to auto, which is how the
   preview collapsed to the 150px an iframe defaults to. Stretch has no such dependency.
   margin must drop to `0 auto` for it to work at all - a cross-axis `auto` margin cancels stretch
   outright - and that still keeps the horizontal centering #196 relies on, since an auto margin
   resolves to 0 once the iframe is wider than the stage and must stay reachable by scrolling. */
.fe-preview .fun-stage iframe{height:auto;align-self:stretch;margin:0 auto}
/* the 9 page tabs squash and wrap inside the preview pane at ~740-1050px; scroll them instead */
.fe-preview .seg{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fe-preview .seg button{flex:none;white-space:nowrap}

/* ---------- editor type scale (#184) ----------
   Ten distinct sizes were rendering in this column (10 / 10.5 / 11 / 11.5 / 12 / 13 / 13.33 / 13.5
   / 14 / 16px), five of them under 13px, and most were written as inline style="font-size:" so no
   stylesheet could reach them. Collapsed to four roles. 11px survives ONLY as an uppercase,
   letterspaced eyebrow - the tracking and weight carry legibility there, and it is never running
   text. Nothing you actually read sits below 13px. */
.fe-ttl{font-size:15px;font-weight:800;letter-spacing:-.01em}
.fe-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.fe-note{font-size:13px;color:var(--muted);line-height:1.45}
.fe-hint{font-size:12.5px;color:var(--muted)}
/* One label voice in this column (#184b). .field label is 11px uppercase letterspaced - the app's
   convention for form questions - while the style panel's own labels are sentence case. Stacking
   both in one scrolling inspector read as two unrelated designs bolted together. The inspector
   adopts sentence case throughout: these are property names in a dense control panel, not
   questions being asked of the user. Scoped to .fe-inspector, so every other form in the CRM keeps
   the uppercase convention. */
.fe-inspector .field label{font-size:13px;text-transform:none;letter-spacing:0;font-weight:600}
/* Style-panel controls never got the .field treatment (#184a): the hex box, the font-weight select
   and both "advanced" inputs rendered as raw UA controls - square, unpadded, 13.33px - directly
   below perfectly styled theme fields in the same column. Same visual contract as .field, matched
   on position so every control in the panel is covered without touching each call site. */
.fe-ctl input:not([type=color]):not([type=range]),
.fe-ctl select,
.fe-row details input{width:100%;min-width:0;border:1px solid #d7dae2;border-radius:10px;
  padding:8px 10px;font-size:13.5px;background:#fff}
.fe-ctl input:not([type=color]):not([type=range]):focus,
.fe-ctl select:focus,.fe-row details input:focus{outline:none;border-color:var(--accent)}
/* seven sliders sat at OS-default grey in a UI that is indigo everywhere else */
.fe-inspector input[type=range]{accent-color:var(--accent);height:22px;cursor:pointer}
/* one swatch height for the whole column - the theme swatch was 44x34 inline, the style-panel one 32x32 */
.fe-sw,.field input[type=color]{width:40px;height:34px;flex:none;padding:0;
  border:1px solid var(--line);border-radius:9px;background:none;cursor:pointer;overflow:hidden}
.fe-sw::-webkit-color-swatch-wrapper,.field input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.fe-sw::-webkit-color-swatch,.field input[type=color]::-webkit-color-swatch{border:none;border-radius:7px}
.fe-sw::-moz-color-swatch,.field input[type=color]::-moz-color-swatch{border:none;border-radius:7px}

/* ----- brand colour swatches (#181) -----
   The common case is "make this the brand red", which was previously a hex string you had to know
   and type. These are the four theme tokens as one-click chips, read live from the theme fields, so
   the palette can never drift from what the site actually ships. */
.fe-swatches{display:flex;gap:7px;align-items:center;flex-wrap:wrap;min-width:0}
.fe-chip{width:30px;height:30px;flex:none;padding:0;border-radius:9px;cursor:pointer;
  border:2px solid transparent;box-shadow:0 0 0 1px var(--line) inset;transition:transform .08s}
.fe-chip:hover{transform:scale(1.08)}
/* the ring marks "this element is currently this brand colour" - without it the chips are a
   palette you fire blindly, with no way to see which one is already applied */
.fe-chip.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.fe-chip-lbl{font-size:11px;color:var(--muted);font-weight:600}

/* ---------- collapsible style sections (#183) ---------- */
.fe-sec-btn{cursor:pointer;user-select:none}
.fe-sec-btn:hover{color:var(--ink)}
.fe-sec-btn .cpc{font-size:11px;width:11px;flex:none}
/* the reset-all link is not a row control - give it its own full-width line so it stops sitting
   flush-left under right-aligned per-property resets (#184d) */
.fe-resetall{display:flex;justify-content:flex-end;margin-top:12px;
  border-top:1px solid var(--line);padding-top:10px}

/* ----- style inspector rows (#214) -----
   One grid per property: fixed label column, control column takes the rest. Everything lines up
   down a single axis instead of each row inventing its own flex arrangement, which is what made the
   old panel read as noise. */
.fe-row{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;margin-bottom:9px}
/* flex + wrap so the optional "reset" link is pushed to the far right of a full-width stacked
   label, and drops onto its own line rather than colliding with the text in the narrow 86px
   column - .fe-reset uses margin-left:auto, which does nothing at all in a non-flex parent */
.fe-row>.fe-lbl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:13px;font-weight:600;color:var(--muted);line-height:1.3;min-width:0}
.fe-row.fe-stack{grid-template-columns:1fr;gap:5px}
/* min-width:0 is the actual fix for #215, not a tidy-up: a flex item defaults to min-width:auto, so
   a range input refused to shrink below its intrinsic width and shoved the value readout past the
   right edge of the panel. Both the range and the row need it. */
.fe-ctl{display:flex;align-items:center;gap:8px;min-width:0}
.fe-ctl input[type=range]{flex:1;min-width:0}
.fe-ctl>input[type=text],.fe-ctl>input:not([type]){flex:1;min-width:0}
/* fixed width + tabular figures so the number never resizes the row as you drag (0px -> 60px) */
.fe-num{flex:none;width:48px;text-align:right;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;font-weight:600}
.fe-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.fe-pair>div{min-width:0}
.fe-sub{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:3px}
.fe-sec{display:flex;align-items:center;gap:8px;margin:15px 0 10px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.fe-sec::after{content:"";flex:1;height:1px;background:var(--line)}
.fe-row .seg{width:100%}
.fe-row .seg button{flex:1;padding:7px 6px;font-size:12.5px}
/* colour input rendered as a plain filled chip (sizing + swatch pseudo-elements live with the
   theme swatch further down, so both columns share one definition) - the browser default draws a
   bevelled button with the colour inset inside it, which reads as an empty outline, not a colour */

/* ----- editor toolbar (#217): undo/redo top right, the two real actions centred ----- */
.fe-tb-top{display:flex;align-items:flex-start;gap:12px}
.fe-tb-title{flex:1;min-width:0}
.fe-tb-hist{flex:none;display:flex;gap:6px}
.fe-tb-main{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.fe-tb-state{text-align:center;margin-top:9px;font-size:12.5px}

/* ----- inline drop-off readout for the selected element (#219) ----- */
.fe-drop{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;
  border-radius:9px;font-size:12.5px;font-weight:600}
.fe-drop.hi{background:var(--red-soft,#fee2e2);color:#b91c1c}
.fe-drop.mid{background:var(--amber-soft);color:#92400e}
.fe-drop.low{background:var(--green-soft);color:#15803d}
.fe-drop b{font-variant-numeric:tabular-nums}

@media (max-width:1100px){
  .fesplit{grid-template-columns:1fr}
  /* overflow-x:visible here too, not just overflow-y - see the .fe-inspector note above; leaving
     x at hidden while y goes visible would clip instead of letting the stacked column grow */
  .fe-inspector{max-height:none;overflow:visible;padding:0}
  /* the columns are stacked now, so the matched-height machinery has to be unwound or the preview
     would keep a viewport-tall box in the middle of a scrolling page */
  .fe-preview{position:static;height:auto;display:block}
  .fe-preview>#fe_previewpane{display:block;flex:none}
  .fe-preview .fun-stage{flex:none}
  .fe-preview .fun-stage iframe,.fun-stage iframe{height:60vh}
}

/* Claim button on a kanban card (#256). Full width because it is the card's one action and a
   thumb has to hit it on a phone; green so an unowned card reads as available at a glance. */
.kcard .kclaim{display:block;width:100%;margin:7px 0 2px;padding:6px 8px;border:0;border-radius:7px;
  background:#0f7a35;color:#fff;font-weight:700;font-size:11.5px;cursor:pointer;font-family:inherit}
.kcard .kclaim:hover{background:#0c6329}