/* Studio Ninja job/lead profile (trial account measurements, 2026-10-21).
   Desktop ≥992px: workflow column | job + client (side by side from 1200px) and document cards.
   ≤991px: hamburger header, Back / title / + Add bar, info block and collapsible 42px sections. */
.jl-icon{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.jl-mhead,.jl-mobile-only,.jl-burger,.jl-settings,.jl-chevron,.jl-add-wide{display:none}
.jl-job{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px;align-items:start}
.jl-left,.jl-right{display:flex;flex-direction:column;gap:15px;min-width:0}
.jl-pair{display:grid;grid-template-columns:1fr;gap:15px}
@media(min-width:1401px){.jl-pair{grid-template-columns:1fr 1fr}}
@media(min-width:992px){
 .jl-client-box{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'name avatar' 'rows avatar' 'address address' 'switch switch' 'actions actions';margin-bottom:12px;background:var(--sn-surface,#fff);border:1px solid var(--sn-border);border-radius:5px;padding:15px;column-gap:12px}
 .jl-client-box .jl-avatar{grid-area:avatar;margin:0}
 .jl-client-box .jl-client-name{grid-area:name;text-align:left;margin:0 0 6px}
 .jl-client-box .jl-client-name span{display:block;font-size:12px}
 .jl-client-box .jl-rows{grid-area:rows;align-self:end}
 .jl-client-box .jl-actions{grid-area:actions;border-top:1px solid var(--sn-line,#e4e4e7);padding-top:14px}
 .jl-client-box .jl-portal{grid-area:portal;border:0;padding-top:0}
}
.jl-job .card{margin:0;background:var(--sn-soft);border:1px solid var(--sn-border);border-radius:10px;padding:20px}
.jl-job .cardhead{display:flex;align-items:center;gap:10px;padding:0 0 15px;border:0}
.jl-job .cardhead h2{flex:1;margin:0;font-size:16px;font-weight:500;color:var(--sn-text)}
.jl-job .card>.body{padding:0}
.jl-job .cardhead .jl-plus{width:32px;height:32px;min-height:0;padding:0;border-radius:50%;font-size:20px;line-height:30px;background:var(--sn-green);border-color:var(--sn-green);color:#fff}
.jl-job .jl-sec[data-sec=workflow]{background:transparent;border:0;padding:0}
.jl-job .jl-sec[data-sec=workflow]>.cardhead{padding:0 0 12px}
.jl-history-row{display:flex}
.jl-history-row.jl-mobile-only,.jl-actions .button.jl-mobile-only{display:none}
.jl-history,.jl-actions button,.jl-actions .button,.jl-doc__actions .button,.jl-doc__actions button{display:inline-flex;align-items:center;gap:6px;background:var(--sn-surface,#fff);border:1px solid var(--sn-border);border-radius:50px;padding:7px 12px;font-size:13px;font-weight:500;color:var(--sn-text)}
.jl-history .jl-icon,.jl-actions .jl-icon,.jl-doc__actions .jl-icon{width:15px;height:15px}
.jl-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.jl-portal{align-items:center;font-size:12px;color:var(--sn-muted)}
.jl-portal button{padding:5px 10px;font-size:12px}
.jl-job-name{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:16px;font-weight:500}
.jl-job-name i{width:12px;height:12px;border-radius:50%;border:1px solid #18181b33;flex-shrink:0}
.jl-rows{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:24px;margin:0;row-gap:0}
.jl-rows dt{font-weight:500;color:var(--sn-label);line-height:30px}
.jl-rows dd{margin:0;color:var(--sn-label);line-height:30px;overflow-wrap:anywhere}
.jl-note{color:var(--sn-muted);font-size:12px;margin:8px 0 0}
.jl-avatar{position:relative;width:70px;height:70px;border-radius:50%;background:var(--sn-border,#d4d4d8);color:var(--sn-label);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;overflow:visible}
.jl-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.jl-avatar>.jl-icon{width:30px;height:30px}
.jl-photo{position:absolute;right:-2px;bottom:2px;width:22px;height:22px;min-height:0;padding:0;border-radius:50%;background:var(--sn-green);border:2px solid #fff;color:#fff;display:flex;align-items:center;justify-content:center}
.jl-photo .jl-icon{width:12px;height:12px}
.jl-client-name{text-align:center;margin:0 0 10px;font-weight:500}
.jl-client-name a{color:var(--sn-text);text-decoration:none}
.jl-client-name span{color:var(--sn-muted);font-weight:400}
.jl-doc{background:var(--sn-surface,#fff);border:1px solid var(--sn-border);border-radius:5px;padding:15px;margin:0 0 10px}
.jl-doc__top{display:flex;justify-content:space-between;gap:10px}
.jl-doc__top a{color:var(--sn-text);text-decoration:none;font-weight:500}
.jl-doc__status{color:var(--sn-label);margin:2px 0 12px}
.jl-doc__actions{display:flex;gap:8px}
.jl-job .card>.body>.muted{text-align:center;font-size:14px;color:var(--sn-muted);margin:6px 0}
.jl-mail{width:100%;border-collapse:collapse;background:var(--sn-surface,#fff);font-size:12px}
.jl-mail th{background:var(--sn-soft);font-weight:500;color:var(--sn-label);text-align:left;padding:12px}
.jl-mail td{padding:14px 12px;border-top:1px solid var(--sn-border);vertical-align:top}
.jl-mail button{padding:5px 10px;font-size:12px}
.jl-chip{display:block;width:max-content;margin-top:4px;border-radius:360px;padding:2px 8px;font-size:10px;font-weight:500;text-transform:uppercase}
.jl-chip--ok{background:var(--ok-soft,#dcfce7);color:var(--ok-ink,#14532d)}.jl-chip--wait{background:var(--ph-prod-soft,#fef3c7);color:#78350f}.jl-chip--bad{background:var(--ph-lead-soft,#fecdd3);color:#881337}.jl-chip--off{background:var(--sn-line,#e4e4e7);color:var(--sn-label,#3f3f46)}
.jl-addnew{display:flex;flex-direction:column;gap:14px}
.jl-addnew button{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left;border:1px solid var(--sn-border);border-radius:20px;padding:22px 24px;background:var(--sn-surface,#fff);font-weight:400}
.jl-addnew b{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.jl-addnew b .jl-icon{width:26px;height:26px;color:var(--sn-green)}
.jl-addnew span{color:var(--sn-label)}
.jl-log{border:1px solid var(--sn-line,#e4e4e7);border-radius:6px;padding:14px;margin-bottom:14px}
.jl-log__type{display:inline-block;border:1px solid var(--sn-border);border-radius:4px;padding:2px 7px;font-size:12px;margin-bottom:8px}
.jl-log p{margin:4px 0}
.jl-log hr{border:0;border-top:1px solid var(--sn-line,#e4e4e7);margin:8px 0}
.jl-pages{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.jl-pages button{padding:4px 10px;font-size:12px}
.jl-pages .jl-current{background:var(--sn-green);border-color:var(--sn-green);color:#fff}

@media(max-width:991px){
 header{height:61px!important;min-height:61px!important;padding:0 16px!important;justify-content:space-between;flex-wrap:nowrap!important}
 header nav{display:none!important}
 .jl-burger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:0;padding:0;border:0;background:transparent;order:-1}
 .jl-burger .jl-icon{width:24px;height:24px}
 .jl-settings{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--sn-text);order:9}
 .jl-settings .jl-icon{width:24px;height:24px}
 header .bell-button{margin-left:auto}
 header .brand{position:absolute;left:50%;transform:translateX(-50%);margin:0;font-size:20px}
 header .company-menu,header #backup{display:none!important}
 body.jl-nav-open header nav{display:flex!important;position:fixed;top:61px;left:0;bottom:0;width:280px;z-index:30;background:var(--sn-surface,#fff);flex-direction:column;align-items:stretch;justify-content:flex-start;padding:12px;border-right:1px solid var(--sn-border);box-shadow:8px 0 30px #18181b26;overflow:auto}
 body.jl-nav-open header nav a{flex-direction:row;justify-content:flex-start;gap:14px;padding:12px 14px;min-width:0;font-size:15px}
 body.jl-page main{margin:0!important;padding:0 0 40px!important}
 body.jl-page .page-header,body.jl-page .page-subactions,.jl-desktop-only{display:none!important}
 .jl-mobile-only{display:flex}
 .jl-actions .button.jl-mobile-only{display:inline-flex}
 .jl-mhead{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:15px 15px;border-bottom:1px solid var(--sn-border)}
 .jl-mhead h1{margin:0;text-align:center;font-size:20px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .jl-mhead .button,.jl-mhead button{padding:7px 14px;font-size:13px}
 .jl-job{display:flex;flex-direction:column;gap:0;align-items:stretch}
 .jl-left,.jl-right,.jl-pair{display:contents}
 .jl-job .card{background:var(--sn-surface,#fff);border:0;border-bottom:1px solid var(--sn-border);border-radius:0;padding:0}
 .jl-job .jl-sec>.cardhead{height:42px;padding:10px 16px;cursor:pointer}
 .jl-job .jl-sec>.cardhead h2{font-size:16px;font-weight:400}
 .jl-job .jl-sec>.cardhead .jl-plus{display:none}
 .jl-chevron{display:block;width:9px;height:9px;border-right:2px solid var(--sn-muted);border-bottom:2px solid var(--sn-muted);transform:rotate(45deg);margin:-4px 4px 0 0}
 .jl-sec.jl-open>.cardhead{color:var(--sn-green)}
 .jl-sec.jl-open>.cardhead h2{color:var(--sn-green)}
 .jl-sec.jl-open>.cardhead .jl-chevron{transform:rotate(-135deg);margin-top:4px;border-color:var(--sn-green)}
 .jl-job .jl-sec>.body{display:none;padding:0 16px 16px}
 .jl-job .jl-sec.jl-open>.body{display:block}
 .jl-add-wide{display:block;width:100%;margin-top:12px;padding:7px 14px;border-radius:50px}
 .jl-job .jl-sec[data-sec=job]{padding:20px;border-bottom:1px solid var(--sn-border)}
 .jl-job .jl-sec[data-sec=job]>.cardhead{display:none}
 .jl-job .jl-sec[data-sec=job]>.body{display:block;padding:0}
 .jl-job .jl-sec[data-sec=workflow]{padding:0}
 .jl-job .jl-sec[data-sec=workflow]>.cardhead{padding:10px 16px}
 .jl-history-row.jl-mobile-only{display:flex;margin-top:12px}
 .wf-phase{grid-template-columns:1fr;gap:10px}
 .wf-strip{padding:3px 0;height:26px}
 .wf-strip span{writing-mode:horizontal-tb;transform:none;font-size:14px}
 .jl-mail thead{display:none}
 .jl-mail td{display:block;border:0;padding:4px 0}
 .jl-mail tr{display:block;border-top:1px solid var(--sn-border);padding:10px 0}
}
@media(min-width:992px) and (max-width:1280px){header nav a{min-width:0;padding:13px 7px}header .brand{font-size:21px;margin-right:8px}.company-menu{max-width:150px}}
.jl-doc{position:relative}
.jl-doc-dots{position:absolute;right:12px;bottom:12px}
.jl-doc-dots>summary{border:1px solid var(--sn-border);background:var(--sn-surface,#fff)}
.jl-doc-dots .sn-menu{top:auto;bottom:34px}
.jl-doc-visible{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:13px;border-top:1px solid var(--sn-line,#e4e4e7);color:var(--sn-text);font-weight:400}
.jl-rows dd{white-space:pre-line;line-height:20px;padding:5px 0}
.jl-client-box .jl-address{grid-area:address;border-top:1px solid var(--sn-line,#e4e4e7);margin-top:10px;padding-top:8px}
.jl-client-box .jl-switch{grid-area:switch}
.jl-switch{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--sn-label);padding:12px 0;border-top:1px solid var(--sn-line,#e4e4e7);margin-top:10px;cursor:pointer}
.jl-switch input{position:absolute;opacity:0;width:1px;height:1px}
.jl-switch i{width:32px;height:18px;border-radius:9px;background:var(--sn-chip,#a1a1aa);position:relative;flex:0 0 32px;transition:background .15s}
.jl-switch i::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--sn-surface,#fff);transition:left .15s}
.jl-switch input:checked+i{background:var(--sn-green)}
.jl-switch input:checked+i::after{left:16px}
.jl-switch input:focus-visible+i{outline:2px solid var(--sn-green);outline-offset:2px}
@media(max-width:991px){.jl-client-box+.jl-client-box{border-top:1px solid var(--sn-line,#e4e4e7);padding-top:18px;margin-top:6px}.jl-client-box .jl-rows{border-top:1px solid var(--sn-line,#e4e4e7);padding-top:8px}}
/* «Add New» as in Studio Ninja: the 720px dialog at the top (full height), Cancel full width at the bottom. */
#modal:has(.jl-addnew){width:min(720px,96vw);max-width:720px;height:min(840px,calc(100vh - 60px));margin-top:30px;border-radius:4px}
#modal:has(.jl-addnew) #form{display:flex;flex-direction:column;height:100%}
#modal:has(.jl-addnew) #fields{flex:1;max-height:none;overflow:auto}
#modal:has(.jl-addnew) .modalhead h2{font-size:20px;font-weight:500}
#modal:has(.jl-addnew) #close{border:0;background:none;color:var(--sn-chip,#a1a1aa);font-size:22px;width:auto;height:auto;padding:0 4px;box-shadow:none}
#modal:has(.jl-addnew) footer{border:0}
#modal:has(.jl-addnew) footer #cancel{width:100%;padding:11px 16px;font-size:14px}
.jl-doc__status--ok{color:var(--sn-green)}
.jl-doc__sum{display:grid;grid-template-columns:max-content 1fr;column-gap:16px;margin:12px 0 4px;font-size:12px;color:var(--sn-label)}
.jl-doc__sum dt{font-weight:400}
.jl-doc__sum dd{margin:0}
.jl-archived{justify-self:end;background:var(--sn-label,#3f3f46);color:#fff;border-radius:3px;padding:3px 8px;font-size:11px;font-weight:500;letter-spacing:.02em}